angularjs 绑定策略中属性为什么可以去掉中间的中划线
发布网友
发布时间：2022-04-25 16:12
共1个回答
热心网友
时间：2022-04-22 16:27
全文讨论围绕下面这个例子，可在进入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>1
ng-transclude 将指令包裹的内容放到了这段标签里面，即编译过后应该是
<div class="body" ng-show="showMe" ng-transclude>
<span class="ng-binding ng-scope">
{{text}}
</span>
</div>12345
使用可以是=，自动绑定 or = attr(属性名)；
从上面的例子我们可以知道
scope : {
title: '=expanderTitle'
}123
指令内的title绑定的值为expanderTitle中定义的值，即title
于是我们可以在template中引用{{title}}，这里的{{title}}便是在指令隔离作用域上的scope（指令的隔离作用域便是通过这种方式来跟父级作用域联系的），这里的scope也可以这样写
scope : {
expanderTitle: '='//自动绑定
}123
这时候如果在template中想引用控制器作用域上的title,则要将template中的{{title}}改成{{expanderTitle}},这里可以理解是在指令的隔离作用域上给了父作用域上的title一个别名expanderTitle
@’绑定策略
‘@（or @attr）’，本地作用域属性，使用@将本地作用域同DOM属性的值进行绑定。
这里如果把指令上的scope改成
scope : {
title: '@expanderTitle'//自动绑定
}123
这个时候的{{title}}的值就是在DOM属性中expanderTitle的值，即title
同样也可以这样写
scope : {
expanderTitle: '@'//自动绑定
}123
这个时候把{{title}}改成{{expanderTitle}}就跟上面效果一样；
‘&’绑定策略
& or（&attr）’，父作用域绑定，通过&符号可以对父作用域进行绑定，已变在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。
这里把代码改一下，在指令scope中添加
onSend: '&'1
指令中的template改为
template : '<div>'
+ '<div class="title" ng-click="onSend()">{{title}}</div>'
+ '<div class="body" ng-show="showMe" ng-transclude></div>'
+ '</div>',1234
父级控制器中添加sendSomething方法
$scope.sendSomething=function(name){
alert(name);
}123
Dom中添加on-send的属性
<expander class='expander' on-send="sendSomething('something')" expander-title='title'>
{{text}}
</expander>123
这里便把指令中的onSend中的包装函数sendSomething在父级作用域中执行了，执行结果是弹出something；
同样这里的scope也可以改成 onSend:’&onSend’形式；
如果你跟着我也尝试着做了上面的这些东西，相信你也一定了解了angularjs指令中的三种绑定策略！
