<div ng-controller="nameController">
父级scope中:<input ng-model="mark"/>
<direct model="mark"/></direct>
</div>
这就完成了,其实只不过是加了一点小把戏,把ng-model换成了model而已。
注意到,这两个例子中,都是使用对象的引用,而不是单纯的字符串,这也是=可以进行双向绑定的关键。
最后是&符号。它的含义是:对父级作用域进行绑定,并将其中的属性包装成一个函数,注意,是属性,意即,任何类型的属性都会被包装成一个函数,比如一个单纯的字符串,或是一个对象数组,或是一个函数方法,如果是字符串、对象数组和无参的函数,那么可想而知,它们都会被包装成一个无参的函数,若是有参的函数方法则反之,并且我们需要为其传入一个对象。现在,分别针对有参和无参两种情况举例。
无参情况↓
JS代码:
.directive("direct",function(){
return{
restrict: 'ECMA',
template: '<div>{{ title }}</div>'+'<div><ul><li ng-repeat="x in contents">{{ x.text }}< /li></ul></div>',
scope:{
getTitle:'&',
getContent:'&'
},
controller:function($scope){
$scope.title=$scope.getTitle(); //调用无参函数
$scope.contents=$scope.getContent(); //调用无参函数
}
}
})
.controller("nameController",function($scope){
$scope.title="标题";
$scope.contents =[{text:1234},{text:5678}];
});
HTML代码:
<div ng-controller="nameController">
<direct get-title="title" get-content="contents"></direct>
</div>
这个例子有几个注意点:
1.指令的本地属性(即模板里花括号中的属性)需要从本地取值,所以使用了controller选项,而在controller选项中,两个无参方法分别返回了父级scope中的title字符串和contents对象数组。
2.在HTML中,我们把设置了get-title和get-content的属性值为title和contents,这实际上就完成了与父级scope的绑定,因为我们才可以从那儿取得实质的内容。
OK,有参情况↓
JS代码:
.directive("direct",function(){
return{
restrict: 'ECMA',
template: '<div><input ng-model="model"/></div>'+'<div><button ng-click="show({name:model})">show</button>',
scope:{
show:'&'
}
}
})
.controller("nameController",function($scope){
$scope.showName=function(name){
alert(name);
}
});
HTML代码:
<div ng-controller="nameController">
<direct show="showName(name)"></direct>
</div>
这个例子中,通过模板中的ng-click触发了show函数并将一个叫做model的对象作为name参数传递了进去,而在html中,我们把show的属性值设为showName(name)。这其中的道理跟无参的例子是大同小异的。
大功告成,@,=,&的绑定策略大概就是这样了。有什么需要补充和纠正的,我恳请各位大神向我提出,谢谢!
一些AngularJS相关文章链接:
希望你喜欢,并分享我的工作~带你走近AngularJS系列:
在 AngularJS 应用中通过 JSON 文件来设置��态