AngularJS嵌套指令沒有得到評估

我剛剛開始創建Angular指令（我是新來的框架，以及），但我遇到嵌套指令似乎被忽略的問題。我的指令代碼的基礎是UI Bootstrap's「選項卡」和「窗格」指令。AngularJS嵌套指令沒有得到評估

要點是我想能夠在「佈局」內編譯「組件」列表。最終，每個「組件」標籤上也應該有一個屬性，它會指示佈局從某個已知模板位置呈現內容。然而，現在，即使我的模板中有兩個組件，我甚至無法在組件指令中獲取「鏈接」功能。

這裏是我的情況普拉克：

http://plnkr.co/edit/K4n2Mx3kZyvVYGDyJ7t9

來源

2013-05-03 Monkey34

你誤用ngTransclude通過將它的ngRepeat內。這是一種雞/雞蛋的情況，因爲沒有什麼可以重複，沒有任何東西被橫掃。

此外，由於您在HTML中指定了組件，因此在模板中甚至不需要ngRepeat。

http://plnkr.co/edit/aYjdd4skbKC3FEM3lCfY?p=preview

template: 
    '<section class="layout">' + 
    '<h4>Before all components</h4>' + 
    '<div ng-transclude></div>' + 
    '<h4>After all components</h4>' + 
    '</section>'

來源

2013-05-03 23:30:56 Langdon

D'哦，回頭看的UI引導代碼，他們的確有外部的ngTransclude指令其循環（他們只是使用ngRepeat directiv e顯示每個窗格上方的選項卡列表）。謝謝您的幫助！ – Monkey34 2013-05-03 23:37:33

當您使用NG-重複，它會創建一個新的範圍，它讓你NG-transclude不正確的範圍內用於注入transclusion。

所以，當你刪除ng-repeat時，你會得到渲染的組件。現在

，爲了控制佈局，您可以將元素添加到控制器，就像你與他們的範圍做，然後相應地佈局這些控制器：

// inside the controller 
this.addComponentElement = function (componentElement) { 
    componentElements.push(componentElement); 
}; 
// watch for array changes and handle layout

或者，你可以使用在編譯+鏈接組合transclude功能才能到transcluded DOM參考，並操縱它的佈局：

compile:function(telement, tAttrs, transcludeFn){ 
    return function(scope, element, attrs){ 
     transcludeFn(scope, function(transcludedDom){ 
     // layout the transcludedDom 
     }) 
    }

來源

2013-05-03 23:42:41

AngularJS嵌套指令沒有得到評估

回答

相關問題