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 按回车键相应按钮提交事件
Nov 02 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 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代码
2006/12/06 PHP
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jquery制作弹窗提示窗口代码分享
2014/03/02 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
js css自定义分页效果
2017/02/24 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python将人民币转换大写的脚本代码
2013/02/10 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python matplotlib拟合直线的实现
2019/11/19 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python怎么判断素数
2020/07/01 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
大学毕业生推荐信
2014/07/09 职场文书
迎国庆横幅标语
2014/10/08 职场文书
交通事故起诉书
2015/05/19 职场文书