angularjs于directive声明scope说明何时以及如何使用对象修饰符
2015-10-16 12:34
676 查看
于angular我们定义directive方法。查看
除了代码中出现的属性,另一些其它的属性可供配置,这里不作详述。
今天我们要说的重点是scope字段。
常规使用方法设置
如果我们的hml代码例如以下
相应的controller部分代码
那这几种修饰符的含义又是什么呢,他们怎样关联起来的
”=“:指令中的属性取值为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上的属性。可是这属性必须为一个函数回调
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上的属性。可是这属性必须为一个函数回调
相关文章推荐
- 学习笔记-AngularJs(十)
- angular ng-href
- [AngularJS]Argument 'xxxx' is not a function, got undefined
- 基于AngularJS实现页面滚动到底自动加载数据的功能
- angularJs中factory,service,provider
- angularJS与bootstrap结合实现动态加载弹出提示内容
- angularJS配合bootstrap动态加载弹出提示内容
- angularJS与bootstrap结合实现动态加载弹出提示内容
- 基于AngularJS实现页面滚动到底自动加载数据的功能
- AngularJS 中的 factory、 service 和 provider区别
- 如何在play框架的前端_通过Angularjs框架使用html模板
- angular this vs $scope (How does 'this' and $scope work in AngularJS controllers?)
- angula 之 ngModel
- 前端开发工具集-----项目开发AngularJS篇
- AngularJS 表单验证
- AngularJs + REST API 文件下载
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
- table sorting–angularjs
- 指令<AngularJs>
- 走进AngularJs(七) 过滤器(filter)