アイソスコープ属性は、/ディレクティブのリンク機能に未定義消えている

Question

ディレクティブは、スコープを隔離持っている、とスコープの属性は、「@」を渡されています。

これはディレクティブが呼び出された方法です。

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

これはディレクティブが定義されている方法です。

は「厳格な使用」;

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; 

}]); 

私はスコープオブジェクトを検査（それが正しく設定さiconImage、iconTooltipとiconRoute性質を持っているように見える、にconsole.logの出力放火犯で（scope_）をクリックしてください。

しかしにconsole.log （scope.iconImage）、にconsole.log（scope.iconTooltip）と

Answer 1

使用$observeは補間を含む属性（例：src="{{bar}}"）の値の変化を観察することにconsole.log（scope.iconRoute）印刷 "未定義"。だけでなく、これは非常に効率的ですが、それはまた、リンクフェーズ中に補間がまだ評価されていないので、値はundefinedに設定されているため、実際の値を簡単に取得することができます。 - directive doc

手動でスコープを検査するまでに、値が定義されます。

$ observe（実際には$ watchは '@'で定義された分離スコープのプロパティでも動作する）を使用する必要があるのは、補間された値が変更されるたびに指示を行う必要があるためです。たとえば、textForIconの値が変更された場合は、ディレクティブで管理されているDOMの内容を変更することができます。

あなたはリンク機能の実行時に定義された値が必要な場合は、次の2つのオプションがあります：

1. 使用「=」の代わりに「@」のを。これには、HTMLから{{}}を削除する必要があります。
2. 値が変更されない場合は、文字列を次のように渡します。
   
   ディレクティブで、attrs.iconClassを使用してください。「@」は必要ありません。