angular 指令@、=、&的用法和区别

1.指令作用域中的@

作用是把 当前属性 作为 字符串 传递。

html:

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

js:

 var  myModule = angular.module( "  MyModule  "  , []);
myModule.controller(  '  MyCtrl  ' , [ '  $scope  '  , function($scope){
      $scope.pureWater = "  纯净水  "  ;
}]);
myModule.directive(  "  drink  "  , function() {
        return   {
         restrict:  '  AE  '  ,
        scope:{
             water:  '  @  '　　/* link———— scope.water = attrs.water */  
        },
         template:  "  <div>{{water}}</div>  "  
     }
}); 

result:

 

这里:

 scope:{
       water:  '  @  '
  } 

该表达式等价于：

 link:function(scope,element,attrs){
  　　scope.water = attrs.water;
} 

具体含义就是在指令的scope上定义一个属性名：water，它的值就是前台界面中water属性的值，也就是"{{pureWater}}";

同时{{pureWater}}的值我们从声明的控制器可以看出：

$scope.pureWater= "  纯净水  " ;

 

2、指令作用域中的=

作用是与 父scope 中的 属性进行双向绑定 。

<div ng-controller= "  MyCtrl  " > 

    Ctrl:
     <input type= "  text  "  ng-model= "  pureWater  " > 

    Directive:
     <drink water= "  pureWater  " ></drink>

</div>                

 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"/>  '  
    }
}); 

这里=的手段类似，通过页面设置两个输入框，分别代表指令和控制器的作用域，在JS代码实现了双向绑定，做到了控制器与指令在各自作用域内能够影响对方，也就是双向通信，具体思路与@类似，不赘述，上图：

3.指令作用域中的&

主要作用是传递一个来自父scope的函数，稍后调用。

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

 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/>  '  
    }
}); 

从页面可以看出，这里定义了一个标签<greeting></greeting>，并在其中定义了属性名greet，与上面的@以及=不同的是，属性名后面是一个方法，所以，这里的&主要用于在Controller和directive之间传递函数，实现两者之间的函数通信，在JS中，将前台的greeting标签替换为template中的内容，一个输入框加上一个按钮，按钮上绑定了greet函数，与前台页面的greet相呼应，而前台的greet函数在控制器中有定义，所以指令中也是调用的控制器中的greet函数。执行结果如下：

 

 

via: http://www.tuicool.com/articles/aAveEj

查看更多关于angular 指令@、=、&的用法和区别的详细内容...