95

我的 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在执行console.log(attrs).

有什么建议吗？

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

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

AngularJS + stackoverflow = 幸福

4

2 回答 2

83

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

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

于 2012-08-11T10:31:54.547 回答
25

尽管在您的特定场景中使用 '@' 比使用 '=' 更合适，但有时我使用 '=' 这样我就不必记住使用 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');
            }
        },
    }
});

小提琴。

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

于 2013-01-03T16:47:55.237 回答