自定義指令-directive (轉)

一、指令做用域中的@

做用是把當前屬性做爲字符串傳遞。

前臺代碼：

<div ng-controller="MyCtrl">
       <drink water="{{pureWater}}"></drink>
</div>

Js代碼：

<script type="text/javascript">
　　var myModule = angular.module("MyModule",[]);

　　myModule.controller('MyCtrl', ['$scope', function($scope){
　　　　$scope.pureWater = "純淨水";
　　}]);

　　myModule.directive("drink",function(){
　　　　return {
　　　　　　restrict: 'AE',
　　　　　　scope:{
　　　　　　water:'@'
　　　　　　},
　　　　　　template: "<div>{{water}}</div>"
　　　　}
　　});
</script>

執行結果：

（1）HTML頁面中，聲明一個標籤<drink></drink>，其中定義一個屬性名：water  屬性值：pureWater

（2）JS文件中，首先從模塊開始，而後建立一個控制器，再定義一個指令，主要實現的是將"<drink></drink>"替換爲"<div>{{water}}</div>"標籤顯示

（3）重點介紹這裏的

scope:{

        water: '@'

}

該表達式等價於：

link:function(scope,element,attrs){

     scope.water=attrs.water;

  }

具體含義就是在指令的scope上定義一個屬性名：water，它的值就是前臺界面中water屬性的值，也就是"{{pureWater}}";

　　同時{{pureWater}}的值咱們從聲明的控制器能夠看出：$scope.pureWater="純淨水";

因此最終頁面顯示的是「純淨水」，主要的流程就是：

　　a.在指令中，經過@實現指令與HTML頁面元素關聯;

　　b.在控制器中又實現了與頁面的聯繫;

　　c.從而藉助HTML頁面創建起控制器與指令的聯繫，也是一種通信方式。

具體見下圖：

二、指令做用域中的=

做用是與父scope中的屬性進行雙向綁定。

<div ng-controller="MyCtrl">
　　Ctrl:
　　<br/>
　　<input type="text" ng-model="pureWater">
　　<br/>
　　Directive:
　　<br/>
　　<drink water="pureWater"></drink>
</div>

Js代碼：

<script type="text/javascript">
　　var myModule = angular.module("MyModule",[]);

　　myModule.controller('MyCtrl', ['$scope', function($scope){
　　　　$scope.pureWater = "純淨水";
　　}]);

　　myModule.directive("drink",function(){
　　　　return {
　　　　　　restrict: 'AE',
　　　　　　scope:{
　　　　　　water:'='
　　　　　　},
　　　　　　template: "<input type="text" ng-model="water" />"
　　　　}
　　});
</script>

這裏=的手段相似，經過頁面設置兩個輸入框，分別表明指令和控制器的做用域，在JS代碼實現了雙向綁定，作到了控制器與指令在各自做用域內可以影響對方，也就是雙向通訊，具體思路與@相似，不贅述，上圖：

三、指令做用域中的&

主要做用是傳遞一個來自父scope的函數，稍後調用。

<div ng-controller="MyCtrl">
　　<greeting greet="sayHello(name)"></greeting>
　　<greeting greet="sayHello(name)"></greeting>
　　<greeting greet="sayHello(name)"></greeting>
</div>

js代碼

<script type="text/javascript">
　　var myModule = angular.module("MyModule",[]);

　　myModule.controller('MyCtrl', ['$scope', function($scope){
　　　　$scope.sayHello = function(name){
　　　　　　alert("hello" + name);
　　　　}
　　}]);

　　myModule.directive("greeting",function(){
　　　　return {
　　　　　　restrict: 'AE',
　　　　　　scope:{
　　　　　　　　greet:'&'
　　　　　　},
　　　　　　template: '<input type="text" ng-model="userName" /><br/>' +
　　　　　　　　'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
　　　　}
　　});
</script>

從頁面能夠看出，這裏定義了一個標籤<greeting></greeting>，並在其中定義了屬性名greet，與上面的@以及=不一樣的是，屬性名後面是一個方法，因此，這裏的&主要用於在Controller和directive之間傳遞函數，實現二者之間的函數通訊，在JS中，將前臺的greeting標籤替換爲template中的內容，一個輸入框加上一個按鈕，按鈕上綁定了greet函數，與前臺頁面的greet相呼應，而前臺的greet函數在控制器中有定義，因此指令中也是調用的控制器中的greet函數。執行結果以下：

（1）初始界面

（2）在第一個文本框填值

 (3)在第二個文本框填值

（4）在第三個文本框中填值

轉自：http://www.cnblogs.com/bigdataZJ/p/AngularJS1.html