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 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
JavaScript实现简单的弹窗效果
May 19 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
mysql 字段类型说明
2007/04/27 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
joomla组件开发入门教程
2016/05/04 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python中as用法实例分析
2015/04/30 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python实现Virginia无密钥解密
2019/03/20 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
python实现门限回归方式
2020/02/29 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
大学生职业规划前言模板
2013/12/27 职场文书
《雨点》教学反思
2014/02/12 职场文书
企业指导教师评语
2014/04/28 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python