浅谈angularjs中指令的三种绑定策略

在angularjs的指令中存在着三种绑定策略，他们分别是’=’,’@’,’&’

全文讨论围绕下面这个例子，可在进入codepen编辑

See the Pen EjGbeB by Simplefatty (@Dreaking) on CodePen.

‘=’绑定策略

• ‘=or（=attr）’，双向绑定，将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像本地的数据双向绑定一样，本地属性会反映出父级数据模型中发生的变化,使用可以是=，自动绑定 or = attr(属性名)；
  控制器中，我定义了title和text的值，这里

<div class="body" ng-show="showMe" ng-transclude></div>

ng-transclude 将指令包裹的内容放到了这段标签里面，即编译过后应该是

<div class="body" ng-show="showMe" ng-transclude>
  <span class="ng-binding ng-scope">
    {{text}}
  </span>
</div>

使用可以是=，自动绑定 or = attr(属性名)；

从上面的例子我们可以知道

scope : {
    title: '=expanderTitle'
}

指令内的title绑定的值为expanderTitle中定义的值，即title

于是我们可以在template中引用{{title}}，这里的{{title}}便是在指令隔离作用域上的scope（指令的隔离作用域便是通过这种方式来跟父级作用域联系的），这里的scope也可以这样写

scope : {
    expanderTitle: '='//自动绑定
}

这时候如果在template中想引用控制器作用域上的title,则要将template中的{{title}}改成{{expanderTitle}},这里可以理解是在指令的隔离作用域上给了父作用域上的title一个别名expanderTitle

@’绑定策略

• ‘@（or @attr）’，本地作用域属性，使用@将本地作用域同DOM属性的值进行绑定。

这里如果把指令上的scope改成

scope : {
    title: '@expanderTitle'//自动绑定
}

这个时候的{{title}}的值就是在DOM属性中expanderTitle的值，即title

同样也可以这样写

scope : {
    expanderTitle: '@'//自动绑定
}

这个时候把{{title}}改成{{expanderTitle}}就跟上面效果一样；

‘&’绑定策略

• & or（&attr）’，父作用域绑定，通过&符号可以对父作用域进行绑定，已变在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。

这里把代码改一下，在指令scope中添加

onSend: '&'

指令中的template改为

template : '<div>'
         + '<div class="title" ng-click="onSend()">{{title}}</div>'
         + '<div class="body" ng-show="showMe" ng-transclude></div>'
         + '</div>',

父级控制器中添加sendSomething方法

$scope.sendSomething=function(name){
    alert(name);
}

Dom中添加on-send的属性

<expander class='expander' on-send="sendSomething('something')" expander-title='title'>
                {{text}}
</expander>

这里便把指令中的onSend中的包装函数sendSomething在父级作用域中执行了，执行结果是弹出something；

同样这里的scope也可以改成 onSend:’&onSend’形式；

如果你跟着我也尝试着做了上面的这些东西，相信你也一定了解了angularjs指令中的三种绑定策略！