从AngularJS指令访问属性

17 浏览
0 Comments

从AngularJS指令访问属性

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

{{field.su_name}}

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

.directive('suLabel', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      title: '@tooltip'
    },
    template: '',
    link: function(scope, element, attrs) {
      if (attrs.tooltip) {
        element.addClass('tooltip-title');
      }
    },
  }
})

除了attrs.tooltip表达式总是返回undefined之外，一切都正常，尽管在Google Chrome的JavaScript控制台上执行console.log(attrs)时可以看到tooltip属性是可见的。

有什么建议吗?

更新：Artem提供了一个解决方案，就是这样做：

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

AngularJS + stackoverflow = 至高无上的幸福

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

虽然在您特定的情况下，使用' @ '比使用' ='更合适，但有时我使用' ='，这样我就不必记住要使用attrs。$observe():

{{field.su_name}}

指令：

myApp.directive('suLabel', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            title: '=tooltip'
        },
        template: '',
        link: function(scope, element, attrs) {
            if (scope.title) {
                element.addClass('tooltip-title');
            }
        },
    }
});

Fiddle 。

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

0
0 Comments

请查看指令文档中的属性部分。

观察插值属性：使用 $observe 来观察包含插值的属性（例如 src="{{bar}}"）的值的变化。这不仅非常高效，而且还是获取实际值的唯一简便方法，因为在关联阶段中，插值尚未被计算，因此值在这时被设置为 undefined。

0