Angularjs中三种数据的绑定策略(“@”,“=”,“&”)


Posted in Javascript onDecember 23, 2016

前言

我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去。

Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

一、首先回顾一下有哪些绑定策略?

Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

看这个实在是有点抽象了,我们来看具体的实例分析吧!

二、简单的Demo实例

@绑定:传递一个字符串作为属性的值。

比如 str : ‘@string'

控制器中代码部分示例:

myDirec.controller('MyCtrl3',['$scope',function($scope){
 $scope.ctrlFlavor="鸡尾酒";
 
 $scope.sayHello=function(name){
 alert("Hello "+name);
 };
 
}]);

myDirec.directive("drink",function(){
 return{
  restrict:'AE',
  scope:{
  flavor:'@' //自动绑定,传递的是字符串
  },
  template:"<div>{{flavor}}</div>",
 };
});

页面中使用标签部分示例:

<div ng-controller="MyCtrl3">
 <drink flavor="{{ctrlFlavor}}"></drink>
 </div>

分析我们在drink指令中为什么能取得在父作用域中的值呢?原因就在于我们使用了@绑定策略,可以将ctrlFlavor赋值给flavor,这样在模板中就能取到该值了。

=绑定:指定获取属性的类型为父作用域的属性

myDirec.directive("drink2",function(){
 return{
 restrict:'AE',
 scope:{
  flavor:'=' //自动绑定
 },
 template:'<input type="text" ng-model="flavor"/>'
 };
});

页面:

<div ng-controller="MyCtrl3">
 <drink2 flavor="ctrlFlavor"></drink2>
 </div>

执行的流程是这样的:

① 指令被编译的时候会扫描到template中的模型发现有一个flavor,

② 查找scope中是否定义:通过=与父作用域绑定,方式是传递父作用域中的属性ctrlFlavor;

③ flavor与父作用域中的ctrlFlavor属性绑定,找到它的值“鸡尾酒”;

④ 将model的值显示在模板中。

&绑定:传递的是父作用域中的函数

控制器部分:

myDirec.directive("greeting", function() {
 return {
 restrict:'AE',
 scope:{
  greet:'&'
 },
 template:'<input type="text" ng-model="userName" /><br/>'+
   '<button ng-click="greet({name:userName})">问候一下</button><br/>'
 };
});

页面部分:

<div ng-controller="MyCtrl3">
  <greeting greet="sayHello(name)"></greeting>
  <greeting greet="sayHello(name)"></greeting>
  <greeting greet="sayHello(name)"></greeting>
</div>

从结果上看,三个输入框中的内容互不影响,因为都是新的独立作用域,能够完成从视图到模型的绑定。

三、Expander示例

首先看控制器代码:

/*Expander示例*/
myDirec.controller('SomeController',function($scope) {
 $scope.title = '点击展开';
 $scope.text = '这里是内部的显示的内容';
});

myDirec.directive('expander', function() {
 return {
 restrict : 'EA',
 replace : true,
 transclude : true,
 scope : {
  title : '=expanderTitle'
 },
 template : '<div>'
   + '<div class="title" ng-click="toggle()">{{title}}</div>'
   + '<div class="body" ng-show="showMe" ng-transclude></div>'
   + '</div>',
 link : function(scope, element, attrs) {
  scope.showMe = false;
  scope.toggle = function() {
  scope.showMe = !scope.showMe;
  };
 }
 };
});

再看页面部分:

<div ng-controller='SomeController'>
 <expander class='expander' expander-title='title'> {{text}} </expander>
 </div>

执行的流程是这样的:

① 指令被编译的时候会扫描到template中的模型发现有一个{{title}},

② 查找scope中是否定义:通过=与父作用域绑定,方式是传递父作用域中的属性;

我总是在这里犯糊涂,解释下这个“方式是传递父作用域中的属性”,这个在哪里用的呢?

<div ng-controller='SomeController'>
 <expander class='expander' expander-title='title'> {{text}} </expander>
 </div>

看到没,指令中的属性expander-title='title',这不就是传递父作用域中的属性吗?

③ expander-title与父作用域中的title属性绑定,找到它的值“点击展开”;

④ 将title的值显示在模板中。

注意:指令中的独立作用域中的属性title是为了给下面的模板使用 的,而title所对应的值,要依据页面中指令的使用传人具体的父作用域中的属性,完成属性的绑定操作。

总之、我们可以利用angularjs为我们提供的数据绑定策略来实现从父作用域向指令中传值,这个很有用哦!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
jQuery autocomplete插件修改
Apr 17 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 #Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 #Javascript
JS中微信小程序自定义底部弹出框
Dec 22 #Javascript
Bootstrap源码解读表单(2)
Dec 22 #Javascript
javascript学习之json入门
Dec 22 #Javascript
Bootstrap源码解读网格系统(3)
Dec 22 #Javascript
js微信支付实现代码
Dec 22 #Javascript
You might like
phpmyadmin操作流程
2006/10/09 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php单例模式的简单实现方法
2016/06/10 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
Python封装shell命令实例分析
2015/05/05 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python 中Pickle库的使用详解
2018/02/24 Python
python中subprocess批量执行linux命令
2018/04/27 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python实现TCP文件传输
2020/03/20 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
大学生职业生涯规划书
2014/03/14 职场文书
《社戏》教学反思
2014/04/15 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
故意杀人案辩护词
2015/05/21 职场文书
小学副班长竞选稿
2015/11/21 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Elasticsearch 数据类型及管理
2022/04/19 Python