Isolieren Sie die mit @ definierten Bereichsattribute undefiniert/verschwinden in der Verknüpfungsfunktion der Anweisung

Question

Die Direktive hat einen isolierenden Gültigkeitsbereich, und die Gültigkeitsbereichsattribute werden mit "@" übergeben.

Dies ist, wie die Richtlinie genannt wird:

<div ng-init="classForIcon = 'vladClass'"></div> 
<div ng-init="textForIcon = 'Icon\'s text'"></div> 
<div ng-init="routeForIcon = 'www.google.com'"></div> 
<div ng-init="tooltipForIcon = 'my tooltip'"></div> 
<div ng-init="imageForIcon = 'images/HOME_ICON1.png'"></div> 

<rl-icon-widget icon-class="{{classForIcon}}" icon-text = "{{textForIcon}}" icon-tooltip="{{tooltipForIcon}}" icon-route="{{routeForIcon}}" icon-image="{{imageForIcon}}"></rl-icon-widget> 

Dies ist, wie die Richtlinie definiert:

'use strict';

fcPortalApp.directive('rlIconWidget', ['localizationAssistant', function(localizationAssistant) { 
    var obj = { 
     restrict: 'E', 
     templateUrl: 'scripts/directives/rliconwidget/rliconwidget.html', 

     //require: 'ngModel', 
     scope: { 
      //ngModel: '@', 
      iconClass: "@", 
      iconRoute: "@", 
      iconText: "@", 
      iconTooltip: "@", 
      iconImage: "@"   
     }, 

     link: function(scope, element, attrs) { 

      console.log(scope); 
      console.log(scope.iconImage); 
      console.log(scope.iconTooltip); 
      console.log(scope.iconRoute); 

     } 
    }; 

    console.log(obj); 
    return obj; 

}]); 

Wenn ich den Umfang Objekt (klicken Sie auf den Ausgang von console.log (scope_ in Firebug) inspizieren, es sieht aus wie es ist iconImage, iconTooltip und iconRoute Eigenschaften richtig eingestellt.

Doch console.log (scope.iconImage), console.log (scope.iconTooltip) und console.log (scope.iconRoute) print "undefiniert"

Answer 1

Verwenden $observe die Wertänderungen von Attributen zu beobachten, die Interpolation enthalten (zB src="{{bar}}"). Das ist nicht nur sehr effizient, es ist auch das einzige Wa y, um den tatsächlichen Wert leicht zu erhalten, da während der Verknüpfungsphase die Interpolation noch nicht ausgewertet wurde und der Wert zu diesem Zeitpunkt auf undefined gesetzt ist. - directive doc

Wenn Sie den Bereich manuell überprüfen, werden die Werte definiert.

Der Grund, warum wir $ observe verwenden müssen (tatsächlich funktioniert $ watch auch für mit '@' definierte Eigenschaften des isolieren Bereichs) ist, weil eine Anweisung wahrscheinlich etwas tun muss, wenn sich der interpolierte Wert ändert. Wenn sich z. B. der Wert textForIcon ändert, möchten Sie möglicherweise etwas im DOM ändern, das von Ihrer Anweisung verwaltet wird.

Wenn Sie die Werte definiert müssen, wenn die Verknüpfungsfunktion ausgeführt wird, haben Sie zwei Möglichkeiten:

1. Use ‚=‘ anstelle von ‚@‘. Dazu müssen Sie die {{}} s aus dem HTML entfernen.
2. Wenn die Werte nicht ändern, Zeichenfolge übergeben:
   <rl-icon-widget icon-class="vladClass" ...>
   Dann in Ihrer Richtlinie, einfach attrs.iconClass verwenden - keine Notwendigkeit für ‚@‘.