一尘不染

从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表达式始终返回undefined,即使tooltip在执行时从Google
Chrome浏览器的JavaScript控制台可见该属性,该表达式始终返回console.log(attrs)

有什么建议吗?

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

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

AngularJS + stackoverflow =幸福


阅读 197

收藏
2020-07-04

共1个答案

一尘不染

请参阅指令文档中的属性一节。

观察插值属性 :使用$ observe观察包含插值的属性的值变化(例如src =“
{{bar}}”)。这不仅非常有效,而且还是轻松获取实际值的唯一方法,因为在链接阶段尚未评估插值,因此此时将值设置为undefined。

2020-07-04