作为一个新的Angular用户,我遇到了一个问题,我不能在一个元素上有多个带有隔离范围的指令。
我已经意识到,我可以使用attrs。$ observe指令的链接方法,而不是孤立的范围,以保持属性值的最新状态。我想确保我正在以正确的方式做事。
我应该何时使用隔离范围,何时应使用attrs。$ observe?例如......
隔离范围
App.directive('tooltip', function() {
return {
scope: {
tooltip: '@'
},
link: function(scope, element) {
element.enableSomeTooltip({
content: function() {
return scope.tooltip;
}
});
}
}
});
ATTRS。$观察()
App.directive('tooltip', function() {
return {
link: function(scope, element, attrs) {
var tooltip;
attrs.$observe('tooltip', function(newTooltip) {
tooltip = newTooltip;
});
element.enableSomeTooltip({
content: function() {
return tooltip;
}
});
}
}
});
以上两者都有相同的最终结果,对吧?那么“正确”或“角度”的做事方式。如果他们没有相同的最终结果,请解释,以便我能更好地理解。谢谢!
编辑:我想我也可以通过其他方式访问该属性,例如通过元素。例如。 element.attr( '工具提示')。但是,在这种特殊情况下,该属性包含一个需要解析的表达式,这就是我正在查看上述两个选项的原因。
答案 0 :(得分:0)
在制作需要将数据绑定到其html模板的可重用组件时,我倾向于使用隔离范围。
例如,如果一个指令只调用一些非角度插件(如Bootstrap或JQueryUI)并且从不创建一个html模板,那么创建一个隔离范围可能没什么价值,因为attrs。$ observe可以抓取属性的值已更改,并将值保存到指令的链接闭包中,而无需触及$ scope。
<div ng-controller="MyController as vm">
<isolate-scope-directive message="vm.message"></isolate-scope-directive>
<non-isolate-scope-directive message="{{vm.message}}"></non-isolate-scope-directive>
</div>
angular.module('app').controller('MyController', function ($scope) {
var vm = this;
vm.message = 'Hello world';
var i = 0;
setInterval(function () {
$scope.$apply(function () {
vm.message = 'Hello world ' + i++;
});
}, 500);
});
angular.module('app').directive('isolateScopeDirective', function () {
return {
scope: {
message: '='
},
link: function ($scope, element, attributes, controller) {},
template: '<div>{{message}}</div>'
};
});
angular.module('app').directive('nonIsolateScopeDirective', function () {
return {
link: function ($scope, element, attributes, controller) {
attributes.$observe('message', function(newMessage){
element.html(newMessage);
});
},
template: '<div></div>'
};
});
这是一个显示实际效果的jsfiddle:http://jsfiddle.net/ow02cv5w/2/