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>

ng-click时附加模板

1 个答案: