浅谈angularjs中指令的三种绑定策略
2015-08-06 13:33
681 查看
在angularjs的指令中存在着三种绑定策略,他们分别是’=’,’@’,’&’
全文讨论围绕下面这个例子,可在进入codepen编辑
See the Pen EjGbeB by Simplefatty (@Dreaking) on CodePen.
控制器中,我定义了title和text的值,这里
ng-transclude 将指令包裹的内容放到了这段标签里面,即编译过后应该是
使用可以是=,自动绑定 or = attr(属性名);
从上面的例子我们可以知道
指令内的title绑定的值为expanderTitle中定义的值,即title
于是我们可以在template中引用{{title}},这里的{{title}}便是在指令隔离作用域上的scope(指令的隔离作用域便是通过这种方式来跟父级作用域联系的),这里的scope也可以这样写
这时候如果在template中想引用控制器作用域上的title,则要将template中的{{title}}改成{{expanderTitle}},这里可以理解是在指令的隔离作用域上给了父作用域上的title一个别名expanderTitle
这里如果把指令上的scope改成
这个时候的{{title}}的值就是在DOM属性中expanderTitle的值,即title
同样也可以这样写
这个时候把{{title}}改成{{expanderTitle}}就跟上面效果一样;
这里把代码改一下,在指令scope中添加
指令中的template改为
父级控制器中添加sendSomething方法
Dom中添加on-send的属性
这里便把指令中的onSend中的包装函数sendSomething在父级作用域中执行了,执行结果是弹出something;
同样这里的scope也可以改成
如果你跟着我也尝试着做了上面的这些东西,相信你也一定了解了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指令中的三种绑定策略!
相关文章推荐
- APACHE的AcceptPathInfo指令使用介绍
- jsp的常用指令有哪些(编译指令/动作指令整理)
- angularJS 中$attrs方法使用指南
- 简述AngularJS相关的一些编程思想
- AngularJS的一些基本样式初窥
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
- 举例讲解AngularJS中的模块
- 使用AngularJS处理单选框和复选框的简单方法
- AngularJS的内置过滤器详解
- 详解AngularJS中自定义指令的使用
- 使用Raygun来自动追踪AngularJS中的异常
- angularJS结合canvas画图例子
- 教你用AngularJS框架一行JS代码实现控件验证效果
- AngularJS入门教程(零):引导程序