AngularJS指令中的绑定策略实例分析


Posted in Javascript onDecember 14, 2016

本文实例讲述了AngularJS指令中的绑定策略。分享给大家供大家参考,具体如下:

在前面的文章中,我们知道了指令如何生成独立的scope,这一节中我们来仔细研究一下scope中的绑定策略。

总体来说scope的绑定策略分为3种:

(1)@ : 绑定字符串

(2)=: 与父控制器进行双向绑定

(3)&:用于调用父scope中的函数

1.基础方式

<test word="{{wordCtrl}}"></test>
app.controller('myController1',['$scope',function($scope){
    $scope.wordCtrl="hello";
}]);
app.directive('test',function(){
    return{
     restrict:'E',
     template:"<div>{{word}}</div>",
     link:function(scope,ele,attr){
      scope.word=attr.word;
     }
    }
});

显示效果:

AngularJS指令中的绑定策略实例分析

这是最基础的方法,实现了字符串在scope中的绑定

2.实际上,我们可以通过改写实现上述的方法

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"<div>{{word}}</div>",
    }
});

可以通过删除link函数,并且增加@绑定,这样就成功的实现指令中的属性与指令scope的字符串绑定。

3.‘='绑定

如果使用=绑定,那么不仅可以改变指令中scope中值,同时也可以改变父控制器中的值,实现双向绑定。

例子:

<div>
   <span>ctrl:</span>
   <input ng-model="wordCtrl"/>
</div>
<test word="{{wordCtrl}}"></test>
app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"directive:<input ng-model='word' />",
    }
});

效果就是,改变了指令中scope的值的同时也会改变控制器中相对应的变量的值,实现了控制器和指令中scope的双向绑定。

效果如下:

AngularJS指令中的绑定策略实例分析

3.‘&'方法

<test greet="sayHello()"></test>
app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      greet:'&'
     },
     template:"<div ng-click='sayHello({name:'yuxiaoliang'})'>点击说HELLO</div>",
    }
});

注意传递参数的方法。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 #Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 #Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 #Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 #Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 #Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 #Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 #Javascript
You might like
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
PHP数组array类常见操作示例
2020/05/15 PHP
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
JS设计模式之策略模式概念与用法分析
2018/02/05 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
jQuery创建及操作xml格式数据示例
2018/05/26 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
python hough变换检测直线的实现方法
2019/07/12 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
医生自荐信
2013/10/11 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
啦啦队口号大全
2014/06/16 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
法人代表资格证明书
2015/06/18 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Pytorch可视化的几种实现方法
2021/06/10 Python