wake-up-neo.com

Zugriff auf Attribute aus einer AngularJS-Direktive

Meine AngularJS-Vorlage enthält eine benutzerdefinierte HTML-Syntax wie:

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

Ich habe eine Direktive erstellt, um es zu verarbeiten:

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

Alles funktioniert einwandfrei, mit Ausnahme des Ausdrucks attrs.tooltip, Der immer undefined zurückgibt, obwohl das tooltip -Attribut in der JavaScript-Konsole von Google Chrome angezeigt wird, wenn eine console.log(attrs).

Irgendein Vorschlag?

UPDATE: Eine Lösung wurde von Artem angeboten. Es bestand darin, dies zu tun:

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

AngularJS + Stackoverflow = Glückseligkeit

94
Ismael Ghalimi

Siehe Abschnitt Attribute aus der Dokumentation zu Direktiven.

Beobachten von interpolierten Attributen : Verwenden Sie $ observ, um die Wertänderungen von Attributen zu beobachten, die Interpolation enthalten (z. B. src = "{{bar}}"). Dies ist nicht nur sehr effizient, sondern auch die einzige Möglichkeit, auf einfache Weise den tatsächlichen Wert zu ermitteln, da die Interpolation während der Verknüpfungsphase noch nicht ausgewertet wurde und der Wert daher zu diesem Zeitpunkt auf undefiniert gesetzt ist.

83
Artem Andreev

Obwohl die Verwendung von '@' angemessener ist als die Verwendung von '=' für Ihr bestimmtes Szenario, verwende ich manchmal '=', damit ich mich nicht daran erinnern muss, attrs zu verwenden. $ Observ ():

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

Richtlinie:

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

Geige .

Mit '=' erhalten wir bidirektionale Datenbindung, daher muss darauf geachtet werden, dass scope.title nicht versehentlich in der Direktive geändert wird. Der Vorteil ist, dass während der Verknüpfungsphase die lokale Bereichseigenschaft (scope.title) definiert wird.

25
Mark Rajcok