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一点特殊用法
May 28 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
面试常见的js算法题
Mar 23 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 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
咖啡知识大全
2021/03/03 新手入门
简单的PHP图片上传程序
2008/03/27 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
javascript求日期差的方法
2016/03/02 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python删除过期文件的方法
2015/05/29 Python
Python的迭代器和生成器
2015/07/29 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
python操作mysql代码总结
2018/06/01 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
Python实现点云投影到平面显示
2020/01/18 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
银行门卫岗位职责
2013/12/29 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
redis数据结构之压缩列表
2022/03/21 Redis
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android