从AngularJS指令访问属性

前端之家收集整理的这篇文章主要介绍了从AngularJS指令访问属性前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的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)。

任何建议?

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

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

AngularJS stackoverflow = bliss

有关指令的文档,请参见第 Attributes节。

observing 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.

原文链接:https://www.f2er.com/angularjs/147059.html

猜你在找的Angularjs相关文章