Question

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

<su-label tooltip="{{field.su_documentation}}">{{field.su_name}}</su-label>

我创建了一个处理它的指令：

.directive('suLabel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      title: '@tooltip'
    },
    template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
    link: function(scope, element, attrs) {
      if (attrs.tooltip) {
        element.addClass('tooltip-title');
      }
    },
  }
})

一切正常，但attrs.tooltip表达式除外，它始终返回undefined，即使tooltip属性在执行{{1}时从Google Chrome的JavaScript控制台中可见}}

有什么建议吗？

更新：Artem提供了一个解决方案。它包括这样做：

console.log(attrs)

AngularJS + stackoverflow = bliss

Answer 1

请参阅指令文档中的Attributes部分。

观察插值属性：使用$ observe观察包含插值的属性的值变化（例如src =“{{bar}}”）。这不仅非常有效，而且它也是轻松获得实际值的唯一方法，因为在链接阶段，插值尚未进行评估，因此此时的值设置为未定义。

Answer 2

尽管使用'@'比使用'='更适合您的特定场景，但有时我使用'='以便我不必记住使用attrs。$ observe（）：

<su-label tooltip="field.su_documentation">{{field.su_name}}</su-label>

指令：

myApp.directive('suLabel', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: '=tooltip'
        },
        template: '<label><a href="#" rel="tooltip" title="{{title}}" data-placement="right" ng-transclude></a></label>',
        link: function(scope, element, attrs) {
            if (scope.title) {
                element.addClass('tooltip-title');
            }
        },
    }
});

Fiddle

使用'='我们得到双向数据绑定，因此必须注意确保scope.title不会在指令中被意外修改。优点是在链接阶段，定义了本地范围属性（scope.title）。

从AngularJS指令访问属性

2 个答案: