Использование AngularJS, как добавить директиву к элементу?

Question

Я новичок в Angular и пытаюсь понять, как динамически создавать новые элементы. У меня есть директива элемента, называемая «панель», которая заменяет тег панели шаблоном.

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

Шаблон для панели (сокращенном):

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

Когда я нажимаю на элемент внутри раздела тега, я хочу добавить еще один «панель» внутри DIV с классом = «подлодки», если «панель» для выбранного элемента еще не существует. Я не могу получить добавленный тег панели, чтобы вызвать директиву и быть заменен шаблоном. Любая точка в правильном направлении была бы полезна для Углового новичка.

Вот простой jsfiddle: http://jsfiddle.net/n9vXz/1/

Answer 1

Я не знаю, как вы, добавляя его к телу, но показывая вам, как это сделать, я буду считать, что это просто элемент у вас есть.

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

Для того, чтобы ваша директива будет обрабатываться сейчас, вы должны сказать ему, чтобы $compile

Вы можете сделать это, выполнив следующие действия непосредственно после добавления его в someOtherElement:

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

Я поместил $ scope или scope, потому что я не уверен, где вы добавляете его в контроллер или внутри директивы.

Если вы можете вставить jsFiddle, это было бы полезно.

---

Там нет необходимости делать компиляции, я думаю, вы должны смотреть некоторые обучающие видеоролики о том, как использовать угловой. Если вы посмотрите на jsfiddle, вам не нужен jquery. Кроме того, у вас есть директивная проводка над элементом панели, но затем внутри этой директивы у вас есть другой элемент панели, поэтому он выполняет рекурсивный цикл и сбой. Я исправил скрипку, чтобы сделать то, что вам нужно:

JsFiddlehttp://jsfiddle.net/BcvPz/1/

---

Используйте нг-повтора, а затем вы можете просто быть Элементы панели повторять везде, где

JsFiddlehttp://jsfiddle.net/BcvPz/2/

Answer 2

Возможно, вам понадобится массив в вашей модели с директивой 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' }); 
    }; 
});