由於$編譯，Javascript（Angular）嵌套指令加載兩次

我有一個嵌套在指令中的指令。爲了滿足我們的設計者需求，我要求內容成爲DOM節點的直接子節點。

<div> 
    <my-directive style="color: blue;"> 

     <p>Name: {{ ctl_a.fname }} {{ ctl_a.sname }}</p> 
     <p>External Test: {{ xternal }}</p> 

     <div> 
     <nested-directive incoming="ctl_a.a_counter"></nested-directive> 
     </div> 

    </my-directive> 
    </div>

什麼是我的最佳選擇，讓這個正確加載？ I.E「my-directive」可以訪問ctl_a.fname，而「嵌套指令」可以訪問$ scope.incoming，作爲由「ctl_a.a_counter」傳入的參數。

Here is a plunk演示了我正在運行的使用$ compile的問題。如果我使用$ compile，則嵌套指令執行兩次。一次用於外部指令編譯方法，並再次用於手動指令。更糟糕的是手動的是唯一一個看起來正確渲染內容的人。

如果我使用ng-transclude，那麼沒有任何屬性傳遞給內部指令，因爲沒有用$$ prevSibling或$ parent作爲前綴，因爲ng-transclude似乎會創建一個新的作用域。這似乎是根本錯誤的，必須像這樣引用它。

編輯：這是another plunk其中第一個分叉。這次我演示了ng-transclude以及我需要如何使用$ parent來訪問控制器的指令。

謝謝。

來源

2016-05-12 Simon Willan

那麼，爲什麼你讓Angular編譯內容，如果你最終自己編譯它？另外我不確定你的實際問題是什麼。 – zeroflagL

_什麼是我的最佳選擇，以正確加載？_如何，我如何有角度處理此標記，以便模板變量在其包含指令的上下文中進行評估。因爲角度不會像目前這樣編譯這些。 –

我不知道，如果這就是你想知道的，但你需要添加terminal: true到您的指令定義對象。這可以防止Angular在my-directive標記中處理HTML，直到您自己編譯爲止。從你的plunker修改代碼：

function myDirective($compile) { 
    var directive = { 
     compile: compile, 
     controller: controller, 
     controllerAs: 'ctl_a', 
     replace: true, 
     terminal:true, //<======= 
     restrict: 'E', 
     scope: { 
      data: '=' 
     } 
    }; 

    return directive;

來源

2016-05-13 08:48:47 zeroflagL

這正是我需要的。我從來不知道「終端」。這會停止編譯內容的摘要循環並給出null變量。非常感謝！ –

大約10分鐘前，我還發現了一種使用ng-transclude實現此功能的方法，利用javascript功能通過引用將屬性附加到對象。我也會在此發佈我的發現作爲替代解決方案。 –

看來你並沒有使用my-directive的data屬性。你可以從我的指令中刪除下面的代碼。

scope:{ 
     data: '=' 
    }

現在您不需要手動編譯，如下所示。所以也刪除它。

$compile(element.contents())(scope);

工作plunkr

來源

2016-05-12 10:13:27

謝謝你看看。我沒有使用數據，但它是一個演示，我需要一個獨立的範圍，並且我將傳入內容。您的plunk工作的唯一原因是您已經刪除了範圍隔離。這是一個[plunkr]（https://plnkr.co/edit/taxVe8OWTdNq1qDQb8jr?p=preview），演示一個名爲「arg」的參數被注入。 –

由於$編譯，Javascript（Angular）嵌套指令加載兩次

回答

相關問題