Atrybuty zakresu izolowanego zdefiniowane przez @ są niezdefiniowane/znikają w funkcji linku dyrektywy

Question

Dyrektywa ma zakres izolowania, a atrybuty zakresu są przekazywane za pomocą znaku "@".

ten sposób dyrektywa nazywa się:

<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> 

ten sposób dyrektywa definiuje:

'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; 

}]); 

Kiedy skontrolować zakres przedmiotu (kliknij na wyjściu console.log (scope_ w Thai), wygląda to iconImage, iconTooltip i iconRoute właściwości ustawione prawidłowo.

Jeszcze console.log (scope.iconImage) console.log (scope.iconTooltip) i console.log (scope.iconRoute) print "nieokreślone"

Answer 1

Zastosowanie $observe obserwować zmiany wartości atrybutów, które zawierają interpolacji (np src="{{bar}}"). Jest to nie tylko bardzo wydajne, ale także jedyne rozwiązanie y, aby łatwo uzyskać aktualną wartość, ponieważ podczas fazy łączenia interpolacja nie została jeszcze oceniona, więc wartość jest w tej chwili ustawiona na undefined. - directive doc

Do czasu ręcznego sprawdzenia zakresu, wartości zostaną zdefiniowane.

Powodem, dla którego musimy użyć funkcji $ obserwuj (faktycznie funkcja $ zegarka będzie również działać dla właściwości zakresu izolowanego zdefiniowanego przez '@'), jest taka, że ​​dyrektywa prawdopodobnie będzie musiała coś zrobić, gdy zmieni się wartość interpolowana. Np. Jeśli zmieni się wartość textForIcon, możesz zmodyfikować coś w DOM zarządzanym przez dyrektywę.

Jeśli potrzebujesz wartości określone, gdy funkcja łącząca działa, masz dwie opcje:

1. użyć „=” zamiast „@”. Będzie to wymagało usunięcia {{}} s z kodu HTML.
2. Jeśli wartości się nie zmienią, przekaż ciągi:
   <rl-icon-widget icon-class="vladClass" ...>
   Następnie w swojej dyrektywie po prostu użyj attrs.iconClass - bez "@".