首页 > 代码库 > angularjs中directive声明scope对象时修饰符解释和用法
angularjs中directive声明scope对象时修饰符解释和用法
在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上的属性,但是这属性必须为一个函数回调
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。