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为我们提供的数据绑定策略来实现从父作用域向指令中传值，这个很有用哦！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
AngularJS 是一个 JavaScript 框架，它可以通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了AngularJs自定义服务之实现签名和加密的相关资料,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了AngularJS中控制器函数的定义与使用方法,结合具体实例形式分析了AngularJS控制器函数的定义、绑定及相关使用技巧,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了AngularJS实现自定义指令与控制器数据交互的方法,结合具体实例形式分析了AngularJS自定义指令的实现以及与控制器数据交互的操作技巧,需要的朋友可以参考下2017-06-06
Angular项目中$scope.$apply()方法的使用详解
这篇文章主要给大家介绍了关于Angular项目中$scope.$apply()方法使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Angularjs具有一定的参考学习价值，需要的朋友们下面跟着小编一起来看看吧。2017-07-07
这篇文章主要介绍了Angular.js 实现带手柄自由调整页面大小的功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-12-12
这篇文章主要介绍了AngularJS实现全选反选功能，这里用到AngularJS四大特性之二----双向数据绑定，对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了js常用正则表达式集锦，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下2014-12-12
本文主要介绍AngularJS 路由与多视图详解，这里整理了相关资料及示例代码，详细说明了在开发过程中如何应用，有兴趣的朋友可以看下2016-08-08
angularJs中ng-model-options设置数据同步的方法
今天小编就为大家分享一篇angularJs中ng-model-options设置数据同步的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论