从AngularJS指令访问属性

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

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

我创build了一个指令来处理它：

 .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.tooltipexpression式的例外，它总是返回undefined ，即使在做一个console.log(attrs)时，从Chrome浏览器的JavaScript控制台中可以看到tooltip属性。

任何build议？

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

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

AngularJS + stackoverflow =幸福

Answer 1

有关指令的文档，请参见属性部分。

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

Answer 2

虽然使用'@'比在特定场景中使用'='更合适，但有时我使用'='，这样我就不必记得使用attrs。

 <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）。