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>共享相同的模板和逻辑，具有孤立的范围，当用户单击按钮时，DIV4旁边会附加第五个<div>，这也与上述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>