角度中的多個自定義指令範圍

我有一個自定義指令，我想在頁面上的多個元素上使用。我無法隔離範圍並根據子範圍顯示元素。這裏是什麼，我試圖做一個例子：角度中的多個自定義指令範圍

app.js：

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}) 
.directive('comShowLabelOnFocus', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     showlabel: '=' 
    }, 
    link: function(scope) { 
     scope.inputClicked = function() { 
     event.currentTarget.placeholder = ''; 
     scope.showlabel = true; 
     }; 
    } 
    } 
});

的index.html：

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 


    <div class="form-group medium-6 columns" com-show-label-on-focus> 
     <input 
     type="email" 
     name="email" 
     ng-model="model.email" 
     placeholder="Your Email Address" 
     ng-click="inputClicked()"/> 
     <label ng-show="showlabel">Email Address (Required)</label> 
     showlabel is: {{showlabel}} 
    </div> 

    <div class="form-group medium-6 columns" com-show-label-on-focus> 
     <input 
     type="text" 
     name="name" 
     ng-model="model.name" 
     placeholder="Your Name" 
     ng-click="inputClicked()"/> 
     <label ng-show="showlabel">Name (Required)</label> 
     showlabel is: {{showlabel}} 
    </div> 
    </body>

在行動：Plunker

基本上，領域標籤應該在該字段獲得焦點時出現。如果我在該指令中註釋掉該範圍聲明，那麼showlabel範圍變量就是根範圍，並且出現兩個標籤。謝謝。

來源

2015-04-15 panzhuli

首先，您期待div中的標記具有指令模板的屬性指令。這不會像你想要的那樣工作。

讓我們在template或您的指令對象的templateUrl定義的加價指令：

return { 
    //other properties 
    template: '<input type="text" name="name" ng-model="model.name" placeholder="{{myPlaceholder}}" ng-click="inputClicked()"/> <label ng-show="showlabel">{{myLabel}}</label>showlabel is: {{showlabel}}', 
}

接下來，設置範圍正確使用模板，不綁定到showlabel。該指令可以在其隔離範圍進行管理：

scope: { 
    myPlaceholder: '@', 
    myLabel: '@' 
}

最後，讓我們看看什麼角文檔不得不說的restrict屬性對於必須在他們的模板控制指令：

時，我應該使用屬性與元素？在創建一個控制模板的組件時使用元素。常見的情況是當您爲模板的某些部分創建特定於域的語言時。在使用新功能裝飾現有元素時使用屬性。

因此，由於您的指令確實控制了它的模板，所以應該將其限制爲一個元素。

到底你的指令的JavaScript可能會是這個樣子：

.directive('comShowLabelOnFocus', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     myPlaceholder: '@', 
     myLabel: '@' 
    }, 
    template: '<input type="text" name="name" ng-model="model.name" placeholder="{{myPlaceholder}}" ng-click="inputClicked()"/> <label ng-show="showlabel">{{myLabel}}</label>showlabel is: {{showlabel}}', 
    link: function(scope) { 
     scope.showlabel = false; 
     scope.inputClicked = function() { 
     event.currentTarget.placeholder = ''; 
     scope.showlabel = true; 
     }; 
    } 
    } 
});

而類似這樣的標記：

<com-show-label-on-focus data-my-placeholder="Your Name" data-my-label="Name (Required)"></com-show-label-on-focus>

And here is your plunker modified and demonstrating this implementation

我所有的編輯道歉，我誤讀你的問題首先。

來源

2015-04-15 20:42:07 Nick

我還將ng模型任務也移出了，以便data-my-model =「{{model.email}}」在我的模板中工作時執行：ng-model =「myModel」指示。非常感謝！ – panzhuli

角度中的多個自定義指令範圍

回答

相關問題