AngularJS我的自定義指令不能訪問屬性，但它似乎其他自定義指令可以

Question

我有以下模板的自定義指令。

.directive('myDirective', ['$controller',function($controller) { 
     return { 
      templateUrl: 'client/test.ng.html', 
      scope: true, 
      controller: ['$scope','$attrs',function($scope,$attrs){ 
       console.log($attrs) 
      }], 
      transclude: true, 

     } 
    }]) 

這個指令是被稱爲如下

<my-directive view="{{view}}"></my-directive> 
    <ion-tab ng-if="platform != 'android'" title="{{label}}" icon-off="{{off}}" icon-on="{{on}}" href="#/tab/{{view}}"> 
      <my-directive view="{{view}}"></my-directive> 
    </ion-tab> 

    <ion-tab ng-if="platform == 'android'" title="{{label}}" class="tab-item" href="#/tab/{{view}}"> 
      <my-directive view="{{view}}"></my-directive> 
    </ion-tab> 

$attrs.view是{{view}}，uninterpolated。 <ion-tab>將表達式內插到變量值中，顯示正確的數據。

這對我來說很困惑。我已經在ion-tab指令的內部和外部放置了my-directive，以防出現某種範圍問題。

訪問表達式的值並使用該值反過來調用另一個指令的關鍵是什麼？

---

背景：

我經歷這一切的原因是因爲

<ion-nav-view name="tab-{{view}}"></ion-nav-view>不起作用。它，就像my-directive似乎無法獲得```view`的值，而是原始未解析的請求。我試圖獲取該值並直接調用該指令。

我似乎可以用$ scope獲得我想要的值$ parent.view然後神祕地設置$ scope.view = $ scope。$ parent.view並設置子模板中的{{view}} DOESNT工作！？

---

更多的洞察力，執行console.log（$ ATTRS）給出：

$…t.Attributes {$attr: Object, $$element: jQuery.fn.init[1], view: "{{view}}", class: "pane tab-content", navView: "active"} 

然而，當這個被擴大，我們有

$$element: jQuery.fn.init[1] 
    $$observers: Object 
    $attr: Object 
    class: "pane tab-content" 
    navView: "active" 
    view: "dash" 
    __proto__: Object 

任何幫助表示讚賞，感謝。

Answer 1

使用鏈接功能獲取屬性值。

.directive('myDirective', ['$controller',function($controller) { 
    return { 
     templateUrl: 'client/test.ng.html', 
     scope: true, 
     transclude: true, 
     link: function(scope,element,attrs){ 
      console.log(attrs); 
     } 
    } 
}]) 

Answer 2

我上無法看到你的指令內的任何HTML，所以我刪除transclude：真

.directive('myDirective', function() { 
    return { 
     templateUrl: 'client/test.ng.html', 
     scope: { 
      view: '=' 
     }, 
     link: function (scope) { 
      console.log("view", view); 
      scope.$watch("view", function (newView, prevView) { 
       console.log("changed view", scope.view, newView, prevView); 
      }); 
     } 
    } 
}) 

Answer 3

這是一個計時問題當某些事情發生一個指令的生命週期內是有關以及它經歷的幾個階段。 在儘可能少detaila越好，這些是相：

1. 編譯
2. 實例化控制器
3. 預聯
4. 後聯

注意resovling內插屬性（ {{...}}）的值在預鏈接階段有時會發生（並且它也是一個Angular內置指令）。這意味着：

a。在控制器實例化期間解決的值是而不是。 b。這些值在鏈接後階段當然是可以解決的。
c。根據您的指令相對於（深奧）屬性插值指令（其優先級高於100）的相對優先級，在預鏈接階段可能會或可能不會解決這些值。

_{注意：更高的優先級意味着更早的鏈接正在發生。}

---

的docs on $compile做一個公平的工作，解釋正在發生的事情（如果你仔細閱讀它真的）。