前言:熟悉angular的同学都知道,ng的指令非常强大,其中directive中的scope绑定策略用途很广泛,今天具体总结下scope绑定策略的知识点以及坑(可能对我自己而言是坑,此文记录。)
1.@
把当前的属性作为字符串传递。还可以绑定来自外层的scope的值,在属性值中插入{{ }}即可。什么意思呢?说的简单一点就是假设你在模板中有个双花括号表达式,然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来:
//查看
app.directive('viewer',function(viewFactory){
return {
restrict: 'EACM',
replace: true,
scope: {
userData: '@'
},
template: '<a href="javascript:;" ng-click="viewLine()">查看</a>',
controller: ['$scope',function($scope){
//;
}],
link: function(scope,element,attr,controller){
scope.viewLine = function(){
scope.userData = angular.fromJson(scope.userData)
viewFactory.viewer(scope)
}
}
}
})
2.=
与父scope中的属性进行双向绑定
注意(重要的问题说三遍):
@是针对字符串(双大括号中expression)而用,但=是针对某个对象的引用;
@是针对字符串(双大括号中expression)而用,但=是针对某个对象的引用;
@是针对字符串(双大括号中expression)而用,但=是针对某个对象的引用;
//编辑
app.directive('edit',function(editFactory){
return {
restrict: 'E',
replace: true,
scope: {
userData: '='
},
template: '<a href="javascript:;" ng-click="editLine()">编辑</a>',
controller: ['$scope',function($scope){
//;
}],
link: function(scope,element,attr,controller){
scope.editLine= function(){
console.log(scope.userData)
scope.userData = angular.fromJson(scope.userData)
editFactory.edit(scope)
}
}
}
})
users是一个对象数组,可以包含很多数组,我们分别把对应的对象通过$index索引传递给了user-date这个属性,user-date属性就把这个对象的引用传递到链接函数中并引用userData;
3.&
传递来自父scope中的函数、稍后调用
它的含义是:对父级作用域进行绑定,并将其中的属性包装成一个函数,注意任何类型的属性都会被包装成一个函数,比如一个单纯的字符串,或是一个对象数组,或是一个函数方法。