AngularJS:在指令内初始化隔离范围 [英] AngularJS : Initializing isolated scope inside a directive

问题描述

我创建了一个指令，它接受一些属性并用这些属性初始化隔离范围.如果未指定属性，则应使用计算值初始化隔离范围.

I have created a directive that accepts some attributes and initializes the isolated scope with these attributes. If an attribute isn't specified, then the isolated scope should be initialized with a calculated value.

我添加了一个链接函数来检查范围并初始化默认值(如果没有使用属性设置值).范围已初始化，但如果我设置了默认值，那么它稍后将被框架覆盖.

I added a link function that inspects the scope and initializes the default values (if no value has been set using the attributes). The scope has been initialized, but if I set a default value then it will be overwritten later by the framework.

一种解决方法是使用 $timeout(...) 并在之后进行设置，但这似乎太过分了.

A workaround is to use $timeout(...) and set it afterwards, but this seems too much of a hack.

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 来说明正在发生的事情.

I have prepared a JSFiddle to illustrate what is happening.

• msg1 通过属性进行初始化，并且始终具有正确的值.
• msg2 不是通过属性初始化的，但可以使用属性进行设置.调用链接方法后，该值将被覆盖.
• msg3 不是通过属性初始化的，这甚至是不可能的.该值是在构建控制器时设置的，并且工作正常.

• msg1 is initialized via the attribute and has the correct value at all times.
• msg2 is not initialized via an attribute, but can be set using an attribute. This value is overwritten after the link method has been called.
• msg3 is not initialized via an attribute, and this isn't even possible. This value is set when constructing the controller and works fine.

似乎 AngularJS 在创建控制器并将指令链接到 DOM 后创建范围并更新其值.谁能告诉我推荐的方法来做到这一点?

It seems that AngularJS creates the scope and updates its value after the controller is created and the directive is linked into the DOM. Can anyone tell me the recommended way to do this?

推荐答案

如果要为 '@' 类型绑定设置默认值，则必须对属性本身进行操作.阅读$compile

You have to operate on the attributes themselves if you want to set defaults for '@' type binding. Read about $compile

你可以在编译函数中进行:

You can do it in the compile function:

compile: function(element, attrs) {
    if (!attrs.msg1) attrs.msg1 = 'msg1';
    if (!attrs.msg2) attrs.msg2 = 'msg2';
}

http://jsfiddle.net/5kUQs/9/

或者您也可以使用链接功能.

OR you can use the link function as well.

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/

这样做的原因是与属性设置的绑定会覆盖您对该范围变量的更改.我们需要修改从中获取值的属性.

The reason for this is that there is a binding with the attribute setup which overrides your changes to that scope variable. We need to modify the attribute that the value is being taken from.

@ 或 @attr - 将局部作用域属性绑定到 DOM 的值属性.结果总是一个字符串，因为 DOM 属性是字符串

@ 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:在指令内初始化隔离范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！