在ng-click时附加模板

Appending templates when ng-click

本文关键字：ng-click      更新时间：2023-09-26

我有一个情况，提供了一个按钮供用户单击。单击按钮后，将创建一个新的<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> 's共享相同的逻辑，我如何在AngularJS中实现这一点?我读这篇文章是为了寻找解决方案，我的方向对吗?

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

这可以使用指令来实现，参见这里的文档。你可以创建一个包含<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>
相关文章：