angularjs中directive声明scope对象时修饰符解释和用法
浏览数：119 /
时间：2015年06月09日
在angular中我们定义directive方法时，可以看到
return {
restrict: 'AE',
scope: {},
template: '<div></div>',
link: function() {}
}
除了代码中出现的属性，还有一些其他的属性可供配置，这里不作详述。
今天我们要说的重点是scope字段。
常规用法设置
scope: {
name: '=',
age: '=',
sex: '@',
say: '&'
}假设我们的hml代码如下
<div my-directive name="myName" age="myAge" sex="male" say="say()"></div>
对应的controller部分代码
function Controller($scope) {
$scope.name = 'Pajjket';
$scope.age = 99;
$scope.sex = '我是男的';
$scope.say = function() {
alert('Hello，我是弹出消息');
};
}那这几种修饰符的含义又是什么呢，他们如何关联起来的
”＝“：指令中的属性取值为controller中对应$scope上属性的取值，可用于双向数据的绑定
”@“：指令中的取值为html中的字面量/直接量；建立一个local scope property到DOM属性的绑定。因为属性值总是String类型，所以这个值总是返回一个字符串。如果没有通过@attr指定属性名称，那么本地名称将与DOM属性的名称一直。例如<widget my-attr=”hello {{name}}”>，widget的scope定义为：{localName:’@myAttr’}。那么，widget scope property的localName会映射出”hello {{name}}"转换后的真实值。name属性值改变后，widget scope的localName属性也会相应地改变（仅仅单向，与下面的”=”不同）。name属性是在父scope读取的（不是组件scope）
”&“：指令中的取值为Contoller中对应$scope上的属性，但是这属性必须为一个函数回调
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
