Question

我试图将“abc”的属性定义为angularjs中的自定义指令：

<div abc="user">
    Access granted!
</div>

然后使用自定义指令更改div中的文本：

.directive('abc', function() {
  var attr;
  return {
    link: function (scope, element, attributes) {
      attr = attributes.abc;
      console.log(attr);
    },
    template: "" + attr
  };
});

结果应为'user'，但未定义，因为attr在执行模板时未定义。那么，任何可能的帮助如何解决这个问题？

Answer 1

您无法使用从属性加载的动态编辑模板，您必须使用范围才能更新模板

template: '<div> {{abc}} </div>', // here it's scope.abc
link : function (scope, elem, attr) {
    scope.abc = attr.abc;
}

Answer 2

你可以这样做：

.directive('abc', function() {

  return {
    scope: {
       attr: '=abc'
    },
    link: function (scope) {
      console.log(scope.attr);
    },
    template: "" + attr
  };
});

Answer 3

您必须扩展范围并在范围中添加属性“attr”

scope: {
   attr: '=abc'
}

然后从html中你可以像这样定义你的属性

<div abc attr="user">
    Access granted!
</div>

如何在angularjs自定义指令中获取模板中的属性值？

3 个答案: