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 相关文章推荐
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 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 文件上传功能实现代码
2009/06/24 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
php实现简单爬虫的开发
2016/03/28 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
JS实现商品筛选功能
2020/08/19 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
python简单贪吃蛇开发
2019/01/28 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
自荐信模版
2013/10/24 职场文书
后勤部长岗位职责
2013/12/14 职场文书
税务干部鉴定材料
2014/02/11 职场文书
培训讲师岗位职责
2014/04/13 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
python爬取某网站原图作为壁纸
2021/06/02 Python