使用AngularJS，我如何將一個指令附加到一個元素？

我是Angular的新手，想了解如何動態創建新元素。我有一個名爲「窗格」的元素指令，用模板替換窗格標籤。使用AngularJS，我如何將一個指令附加到一個元素？

<pane ng-controller="AreaCtrl"></pane>

模板窗格（濃縮）：

<div> 
    <section></section> 
    <div class="subs"></div> 
</div>

當我點擊了部分標籤內的項目，我想追加帶class =「潛艇」的DIV內的另一個「窗格」如果被點擊項目的「窗格」尚不存在。我無法獲得附加的窗格標籤來調用該指令並被模板取代。任何一個正確的方向對於一個角度新手來說都是很棒的。

下面是一個簡單的jsfiddle：http://jsfiddle.net/n9vXz/1/

來源

2013-05-02 Scott Chantry

在指令中的模板其實是在我的實際代碼templateUrl如果有差別。 – 2013-05-02 21:33:40

我不知道怎麼你追加到身體，但爲您展示如何做到這一點，我會認爲這只是你有一個元素。

var newPaneElement = ..... 
someOtherElement.append(newPaneElement);

爲了現在要處理的指令，你必須追加到someOtherElement後把這件事告訴$compile

您可以直接運行下面這樣做：

$compile(newPaneElement)($scope OR scope);

我把$作用域或作用域，因爲我不知道你在哪裏追加它是在一個控制器，或在一個指令。

如果你可以粘貼一個jsFiddle會有幫助。

有沒有必要做編譯，我想你應該看一些關於如何使用angular的教程視頻。看着你的jsfiddle，你不需要jquery。你也有一個指令在窗格元素上佈線，但是在那個指令中你有另一個窗格元素，所以它正在做一個遞歸循環和崩潰。我已經解決了小提琴達到你所需要的：

的jsfiddlehttp://jsfiddle.net/BcvPz/1/

使用NG重複，然後你可以有窗格中的元素重複的地方

的jsfiddlehttp://jsfiddle.net/BcvPz/2/

來源

2013-05-02 19:35:07

這裏是一個jsfiddle我扔在一起：jsfiddle.net/n9vXz/1/ – 2013-05-02 21:57:32

這並沒有做我想做的事情。當我向items數組添加內容時，我想追加另一個窗格元素。你的jsFiddle只是添加一個span元素。 – 2013-05-03 15:07:18

這將使其遞歸。您可以對一組窗格元素使用ng-repeat。 – 2013-05-03 16:05:19

您可能需要在模型中使用ng-repeat指令創建一個數組：

個

<div> 
    <a href="#" ng-click="addItem()">Add Item</a> 
    <section></section> 
    <div class="subs"> 
     <pane ng-repeat="item in list"></pane> 
    </div> 
    </div>

JS：

app.controller("AreaCtrl", function($scope){ 
    $scope.items = [{ name: 'item1' }]; 
    $scope.addItem = function(){ 
    $scope.items.push({ name: 'newItem' }); 
    }; 
});

來源

2013-05-02 20:06:23 Guillaume86

確實！對於AngularJS，我們必須始終以我們的模型*第一*來思考。更好的架構，更輕鬆的測試更不用說代碼只是這樣短... – 2013-05-02 20:27:18

這是我最初嘗試它的方式，但是當我嘗試加載它時，即使我的items數組爲空也會凍結瀏覽器。有時我會得到「超出最大調用堆棧大小」。這是一個jsFiddle我扔在一起：jsfiddle.net/n9vXz/1/ – 2013-05-02 21:56:49

看起來像遞歸問題，你需要重構指令顯式指定模型（定義隔離範圍），你可以嘗試從http：///jsfiddle.net/ganarajpr/vzvmS/3/ – Guillaume86 2013-05-02 22:59:42

使用AngularJS，我如何將一個指令附加到一個元素？

回答

相關問題