AngularJS

Question

我对 AngularJS 还很陌生，已经阅读了一些关于 directives 工作原理的内容。不过，我仍然不太确定如何解决这个问题。

设置如下：

我在视图上有这样的按钮：

<div class="parent">
  <button class="firstButton" type="button" ng-click="fetchData(param1, param2)"></button>
  <button class="secondButton" type="button" ng-click="fetchData(param1, param2)"></button>
  <button class="thirdButton" type="button" ng-click="fetchData(param1, param2)"></button>
  <button class="fourthButton" type="button" ng-click="fetchData(param1, param2)"></button>
</div>
<div class="dataPanel">

 <!-- This is where DIVs will be placed -->

</div>

然后在我的控制器中我有：

// Init value of counter here
var counter = 0;

$scope.fetchData = function (param1, param2) {

  // Do something with parameters here

  counter++;
}

理想情况 是当用户点击 firstButton，fetchData() 启动，从工厂获取数据，然后递增 counter. div 将从 counter 值更改创建。在 DOM 中创建的 div 的数量将取决于 counter 值。每个创建的 div 也填充了从每个 fetchData() 获得的数据。当用户点击更多按钮时，这种情况会继续，尽管在我当前的项目中，我限制了允许的 dataSet 重复项的数量。

HTML 的最终结果将是：

<div class="dataPanel">
 <div class="dataSet">  <!-- from firstButton -->
  <p>{{dataFromFirstButton}}</p>
 </div>
 <div class="dataSet">  <!-- from secondButton -->
  <p>{{dataFromSecondButton}}</p>
 </div>
 <div class="dataSet">  <!-- from thirdButton-->
  <p>{{dataFromThirdButton}}</p>
 </div>
</div>

这样做的Angular方法是什么？我读过指令在 DOM 操作方面几乎可以做所有事情，但不知道在实际构建指令时从哪里开始。

Answer 1

实现此目的的一种方法是使用 ng-repeat 指令基于数组绘制 divs，该数组最初为空。您可以设置 html，以便为数组中的每个对象绘制 div，因为数组是空的，最初不会绘制 div。

<div class="dataSet" ng-repeat="n in arrays[0]">
  This div from button 1 contains: {{n.data}}
</div>

当您单击按钮时，您可以将包含任何所需数据的对象添加到数组中。然后会为相应的 ng-repeat 指令绘制 div。

  $scope.arrays = [ [], [], [], []];

  $scope.fetchData = function (data, idx) {
    $scope.arrays[idx].push({data: data});
  }

参见plunker here。

AngularJS - 在计数器上添加 DOM 个元素++

AngularJS - Add DOM elements on counter++

angularjs-directive

dom-manipulation