我创建了一个指令,它接受一些属性并使用这些属性初始化隔离范围。如果未指定属性,则应使用计算值初始化隔离范围。
我添加了一个链接函数来检查范围并初始化默认值(如果没有使用属性设置值)。范围已经初始化,但是如果我设置了一个默认值,那么稍后它将被框架覆盖。
一种解决方法是使用 $timeout(...) 并在之后设置它,但这似乎太过分了。
function ($timeout) {
return {
scope: { msg1: '@', msg2: '@' },
template: '<div>{{msg1}} {{msg2}} {{msg3}}</div>',
link: function ($scope, $elt, $attr) {
var action = function() {
if (!$scope.msg2) $scope.msg1 = 'msg1';
if (!$scope.msg2) $scope.msg2 = 'msg2';
if (!$scope.msg3) $scope.msg3 = 'msg3';
};
action();
//$timeout(action, 0);
}
};
});
我准备了JSFiddle来说明正在发生的事情。
在创建 Controller 并将指令链接到 DOM 之后,AngularJS 似乎创建了范围并更新了它的值。谁能告诉我推荐的方法吗?
最佳答案
如果要为 设置默认值,则必须对属性本身进行操作。 '@' 类型绑定(bind)。阅读 $compile
您可以在编译函数中执行此操作:
compile: function(element, attrs) {
if (!attrs.msg1) attrs.msg1 = 'msg1';
if (!attrs.msg2) attrs.msg2 = 'msg2';
}
http://jsfiddle.net/5kUQs/9/
或者您也可以使用链接功能。
link: function ($scope, $elt, attrs) {
var action = function() {
console.log('msg1:' + $scope.msg1 + ', msg2:' + $scope.msg2 + ', msg3: ' + $scope.msg3);
if (!attrs.msg1) attrs.msg1 = 'msg1';
if (!attrs.msg2) attrs.msg2 = 'msg2';
if (!attrs.msg3) attrs.msg3 = 'msg3';
};
action();
}
http://jsfiddle.net/5kUQs/13/
原因是与属性设置的绑定(bind)会覆盖您对该范围变量的更改。我们需要修改取值的属性。
@ or @attr - bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings
关于AngularJS : Initializing isolated scope inside a directive,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22967024/