我的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表达式,它总是返回未定义,即使tooltip属性是可见的,从Chrome浏览器的JavaScript控制台,当做一个console.log(attrs)。
任何建议?
link: function(scope,attrs) { attrs.$observe('tooltip',function(value) { if (value) { element.addClass('tooltip-title'); } }); }
AngularJS stackoverflow = bliss
有关指令的文档,请参见第
Attributes节。
原文链接:https://www.f2er.com/angularjs/147059.htmlobserving interpolated attributes: Use $observe to observe the value changes of attributes that contain interpolation (e.g. src=”{{bar}}”). Not only is this very efficient but it’s also the only way to easily get the actual value because during the linking phase the interpolation hasn’t been evaluated yet and so the value is at this time set to undefined.