directive——scope选项与绑定策略

scope 有true（以强制创建一个单独的范围） 和 false (default)；

当scope选项写为scope:{}这种形式的时候，就已经为指令生成了隔离作用域，现在，我们来看看绑定策略的三种形式：& 、= 、@。

指令代码：

angular.directive('myDirective', function(){
  return {
   ...
    scope: {
      obj1: '=',
      obj2: '@',
      obj3: '&'
    }
    ...
  };
});

 

 

绑定策略一   @ ：

它与{ { } }一起使用，并且将始终返回一个字符串。

<my-directive ob1='{{ vm.msg }}'></my-directive>

 

它将本地作用域和DOM中的属性值绑定起来（且这个属性的值必须是父级作用域中的），说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来，看看下面的代码：

directive("direct",function(){
        return{
            restrict: 'ECMA',
            template: '<div>指令中：{{ name }}</div>',
            scope:{
              name:'@forName'
            }
         } 
  })
.controller("nameController",function($scope){
      $scope.Name="张三"; 
});

html 代码：

<div ng-controller="nameController">
   <direct for-name="{{ Name }}"></direct>
<div>

{{ name }}成功地与父控制器中的Name绑定起来了。当然这里也可以这样写name:'@' 这样写的话，就默认DOM中的属性名为name了意

即 for-name="{{ Name }}"可简写为name="{{ Name }}";

 

绑定测量二   = ：

使用对象的引用，而不是单纯的字符串，这也是=可以进行双向绑定的关键。

它传递一个引用到您的指令中的对象。它可以表达与分离的范围同步的属性，从而允许双向绑定。

<my-directive obj1='vm.someObject'></my-directive>

js 代码：

directive("direct",function(){
        return{
            restrict: 'ECMA',
            template: '<div>指令中：<input ng-model="model"/></div>',
            scope:{
              model:'='
            }
         } 
  })

.controller("nameController",function($scope){
      $scope.data=[{name:"张三"},{name:"李四"}]; 
});

 

html 代码：

<div ng-controller="nameController">
        <input ng-model="mark"/>
        <direct model="mark"/></direct>
 </div>

 

绑定测量三  @：

它的含义是：对父级作用域进行绑定，并将其中的属性包装成一个函数，注意，是属性，意即，任何类型的属性都会被包装成一个函数，比如一个单纯的字符串，或是一个对象数组，或是一个函数方法。

在该指令中，它将作为一个函数，即在调用时执行通过表达式。使用它

如下代码 ：

<my directive callback='vm.showAlert('Hi')'></my-directive>

js指令:

return {
    ...
    scope: {
        callback: '&'
    },
    template: '<button ng-click='callback()'>Click</button>'
    ...
}

 

 

总结：

为指令创建隔离作用域的同时，还能访问到父级中的属性 ，可以集成和扩展第三方插件