Добавление шаблонов при ng-click

Question

У меня есть ситуация, когда кнопка предоставляется пользователю для клика. После нажатия на кнопку, новый <div> (который на самом деле шаблон с изолированной сферы) создается, и это <div> добавляется к существующему элементу, например, так:

<button ng-click="openNewDiv()"></button> 
<div>Div content for DIV 1</div> 
<div>Div content for DIV 2</div> 
<div>Div content for DIV 3</div> 
<div>Div content for DIV 4</div> 

Каждый <div> акций одного шаблона и логики, с изолированной областью, когда пользователь нажимает кнопку, пятая часть <div> добавляется рядом с DIV4, которая также имеет ту же логику, что и выше 4 <div>, как я могу достичь этого в AngularJS? Я читаю эту статью, чтобы найти решение, я в правильном направлении?

http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

Answer 1

Это может, достигается с помощью директив, see here for the docs. Вы можете создать директиву, которая содержит шаблон и логику для элементов <div>. Что касается добавления этой директивы несколько раз при нажатии кнопки, вы можете использовать ngRepeat для итерации по массиву, содержащему данные директивы.

В контроллере:

$scope.myData = [dataDiv1, dataDiv2, ..., dataDivx]; 
$scope.openNewDiv = function() { 
    $scope.myData.push(anotherDataDiv); 
}; 

на ваш взгляд:

<button ng-click="openNewDiv()"></button> 
<my-directive myData="data" ng-repeat="data in myData"></my-directive>