Доступ до атрибутів з директиви 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атрибут видно з консолі JavaScript Google Chrome під час виконання console.log(attrs).

Будь-яка пропозиція?

ОНОВЛЕННЯ: Рішення запропонував Артем. Він полягав у наступному:

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

AngularJS + stackoverflow = блаженство

Див. Розділ Атрибути з документації щодо директив.

спостереження за інтерпольованими атрибутами : Використовуйте $ спостереження, щоб спостерігати за змінами значень атрибутів, що містять інтерполяцію (наприклад, src = "{{bar}}"). Це не тільки дуже ефективно, але це також єдиний спосіб легко отримати фактичне значення, оскільки на етапі зв’язування інтерполяція ще не оцінена, і тому значення в даний час встановлюється невизначеним.

Хоча використання '@' є більш доречним, ніж використання '=' для вашого конкретного сценарію, іноді я використовую '=', щоб мені не потрібно було пам'ятати про використання attrs. $ Obser ():

<su-label tooltip="field.su_documentation">{{field.su_name}}</su-label>

Директива:

myApp.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 (scope.title) {
                element.addClass('tooltip-title');
            }
        },
    }
});

Скрипка .

З '=' ми отримуємо двосторонню прив'язку даних, тому слід подбати про те, щоб сфера. Title не була випадково змінена в директиві. Перевага полягає в тому, що на етапі зв’язування визначається властивість локальної області дії (scope.title).