AngularJS：在指令中初始化隔离范围

发布时间：2020-12-17 06:47:03 所属栏目：安全来源：网络整理

导读：我创建了一个接受一些属性的指令,并使用这些属性初始化隔离的作用域.如果未指定属性,则应使用计算值初始化隔离范围. 我添加了一个链接函数来检查范围并初始化默认值(如果没有使用属性设置值).范围已初始化,但如果我设置了默认值,那么框架将稍后覆盖它. 解决

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

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

解决方法是使用$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来说明正在发生的事情.

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

似乎AngularJS在创建控制器并将指令链接到DOM之后创建范围并更新其值.谁能告诉我推荐的方法呢？

解决方法

如果要为“@”类型绑定设置默认值,则必须对属性本身进行操作.阅读约 $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,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/

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

@ or @attr – bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!