从AngularJS指令访问属性

发布时间：2020-12-17 09:11:50 所属栏目：安全来源：网络整理

导读：我的AngularJS模板包含一些自定义HTML语法如： su-label tooltip="{{field.su_documentation}}"{{field.su_name}}/su-label 我创建了一个指令来处理它： .directive('suLabel',function() { return { restrict: 'E',replace: true,transclude: true,scope: {

我的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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!