directivas - Acceder a los atributos de una directiva AngularJS

ng-href angular 5

Question

Mi plantilla AngularJS contiene algunas sintaxis HTML personalizadas 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 expresión attrs.tooltip , que siempre devuelve undefined , a pesar de que el atributo de tooltip es visible desde la consola de JavaScript de Google Chrome al hacer un console.log(attrs) .

¿Cualquier sugerencia?

ACTUALIZACIÓN: una solución fue ofrecida por Artem. Consistió en hacer esto:

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

AngularJS + stackoverflow = felicidad

Answer 1

Aunque usar ''@'' es más apropiado que usar ''='' para su escenario particular, a veces uso ''='' para que no tenga 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'');
            }
        },
    }
});

Fiddle .

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

Answer 2

Ver la sección Attributes de la documentación sobre directivas.

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