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.

一个解决方法是使用$超时（...），并设置它之后，但这似乎太黑客。

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);
    }
  };
});

我有prepared一个的jsfiddle 来说明发生了什么。

• MSG 1 通过属性初始化并始终具有正确的值。


• MSG 2 未通过属性初始化，但可以使用属性来设置。链接方法被调用后，该值将被覆盖。


• 消息3 未通过属性初始化，并且这甚至是不可能的。该值设置构建控制器和正常工作时。

• 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?

推荐答案

您必须对自己的属性操作，如果你想设置的默认值'@'类型绑定。阅读关于 $编译

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屋！