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

前言

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

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

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

二、简单的Demo实例

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

比如 str : ‘@string'

控制器中代码部分示例：

rush:js;"> 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:"

{{flavor}}

",};
});

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

rush:xhtml;">

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

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

rush:js;"> myDirec.directive("drink2",function(){ return{ restrict:'AE',scope:{ flavor:'=' //自动绑定 },template:'

页面：

rush:xhtml;">

执行的流程是这样的：

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

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

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

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

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

控制器部分：

rush:js;"> myDirec.directive("greeting",function() { return { restrict:'AE',scope:{ greet:'&' },template:'
'+ '
' }; });

页面部分：

rush:xhtml;">

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

三、Expander示例

首先看控制器代码：

rush:js;"> /*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 class="title" ng-click="toggle()">{{title}}

'

'

'

'

',link : function(scope,element,attrs) {
scope.showMe = false;
scope.toggle = function() {
scope.showMe = !scope.showMe;
};
}
};
});