angularjs指令与插值属性，尽管有多个属性指令

9 浏览
0 Comments

angularjs指令与插值属性，尽管有多个属性指令

我的AngularJS模板包含一些自定义的HTML语法，如：\n

{{field.su_name}}

\n我创建了一个指令来处理它：\n

.directive('suLabel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      title: '@tooltip'
    },
    template: '',
    link: function(scope, element, attrs) {
      if (attrs.tooltip) {
        element.addClass('tooltip-title');
      }
    },
  }
})

\n一切都运行正常，除了attrs.tooltip表达式，它总是返回undefined，即使在谷歌浏览器的JavaScript控制台中使用console.log(attrs)时，tooltip属性是可见的。\n有任何建议吗？\n更新：Artem提供了一个解决方案。它包括这样做：\n

link: function(scope, element, attrs) {
  attrs.$observe('tooltip', function(value) {
    if (value) {
      element.addClass('tooltip-title');
    }
  });
}

\nAngularJS + stackoverflow = 极乐

0

2 答案

0 Comments

问题的出现原因是使用了带有插值属性的AngularJS指令，并且有多个属性指令存在。在这个特定的场景中，使用'@'比使用'='更合适，因为这样就不需要记住使用attrs.$observe()。然而，为了避免使用attrs.$observe()，有时我会使用'='。

解决方法是在指令中使用'@'而不是'='，同时在模板中使用{{}}表达式来绑定属性值。这样可以避免出现多个属性指令的问题。以下是修改后的指令代码：

myApp.directive('suLabel', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: '@tooltip'
        },
        template: '',
        link: function(scope, element, attrs) {
            if (scope.title) {
                element.addClass('tooltip-title');
            }
        },
    }
});

这样修改后的指令就不会出现多个属性指令的问题了。同时，使用'@'而不是'='也可以简化代码，并且避免了意外修改scope.title的问题。

关于使用这些解决方案的看法，有人认为使用'='会使代码更简洁，但也有人认为使用'@'更合适。具体的使用指南可以参考这里的讨论。

0
0 Comments

AngularJS中的指令(Directive)是一种非常有用的功能，可以让开发者自定义HTML标签和属性，以及为它们添加行为和逻辑。然而，在使用指令时，有时会出现一些问题，比如在使用插值属性(interpolated attribute)时，同时使用多个属性指令(multiple attribute directives)时会遇到一些问题。

在AngularJS的文档中的Attributes部分，提到了一个解决这个问题的方法。文档中指出，当属性中包含插值表达式（例如src="{{bar}}"）时，可以使用$observe来观察属性值的变化。这种方式不仅非常高效，而且是唯一一种很容易获得实际值的方法，因为在链接阶段(linking phase)中，插值表达式还没有被求值，所以此时属性的值被设置为undefined。

此外，需要注意的是，上述文档中的URL已经发生了变化，现在变为docs.angularjs.org/api/ng/service/$compile#Attributes。

通过在指令中使用$observe来观察插值属性的变化，可以解决在使用插值属性且同时使用多个属性指令时所遇到的问题。这个方法非常高效且易于实现，开发者可以通过此方法获得插值属性的实际值。需要注意的是，文档中提供的URL已经发生了变化，开发者可以根据新的URL访问相关文档内容。

0