NG的指令绑定策略

本文章所提到的书为《AngularJs权威教程》 Ari Lerner著

 

绑定策略涉及到4个方式,分别为:“@”,=”,“&”

书中对于绑定策略的描述:

 

本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域变量。

@(or @attr)

 

双向绑定:通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就想普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变。

=(or =attr)

 

父级作用域绑定:通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数。

要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值是要传递给参数的内容。

&(or &attr)

 

因为书里面的描述比较简单,这里做一些补充说明:

从传递的内容来说

@ 传递过来的是一个字符串

= 传递过来的是一个字符串或对象

& 这里一定不要认为&传递的是一个函数,实际上父级作用域绑定传递的是一个函数的描述,通过该描述和父级作用域的函数建立联系然后执行。

 

简单的例子,一个有参函数的定义(无参函数比较容易理解这里就不做说明了):
//指令HTML部分
<plug-in callback="fun(value)"><plug-in>
<script type="text/javascript">
//对绑定的方法进行设计
app.run(['$rootScope',function($rootScope){
$rootScope.fun = function(value){
console.log(value);
}
}]);
//指令的设计
app.directive('plugIn',[function(){
return{
replace:true,
scope:{callback:"&"},
template:'<div class="demo"></div>',
restrict: "EA",
link:function($scope){
//执行绑定的方法
$scope.callback({value:1,data:2});
}
}
}])
</script>

发表评论