Accediendo a atributos desde una directiva AngularJS

Mi plantilla AngularJS contiene alguna sintaxis HTML personalizada como:

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

Creé una directiva para procesarlo:

.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');
      }
    },
  }
})

Todo funciona bien, a excepción de la attrs.tooltipexpresión, que siempre regresa undefined, aunque el tooltipatributo es visible desde la consola JavaScript de Google Chrome al hacer un console.log(attrs).

¿Cualquier sugerencia?

ACTUALIZACIÓN: Artem ofreció una solución. Consistió en hacer esto:

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

AngularJS + stackoverflow = felicidad

Consulte la sección Atributos de la documentación sobre directivas.

observando atributos interpolados : Use $ observe para observar los cambios de valor de los atributos que contienen interpolación (por ejemplo, src = "{{bar}}"). Esto no solo es muy eficiente, sino que también es la única forma de obtener fácilmente el valor real porque durante la fase de vinculación, la interpolación aún no se ha evaluado y, por lo tanto, el valor en este momento se establece en indefinido.

Aunque usar '@' es más apropiado que usar '=' para su escenario particular, a veces uso '=' para no tener que recordar usar attrs. $ Observe ():

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

Directiva:

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');
            }
        },
    }
});

Violín .

Con '=' obtenemos un enlace de datos bidireccional, por lo que se debe tener cuidado para garantizar que scope.title no se modifique accidentalmente en la directiva. La ventaja es que durante la fase de vinculación, se define la propiedad del alcance local (scope.title).