javascript - jQuery 数据表、AngularJS 和范围更改

Question

描述

我正在使用AngularJS
我有一个表，我想使用 DataTable jQuery 插件 ( http://datatables.net/docs/DataTables/1.9.4/DataTable.html ) 将其显示为“数据表”。

逻辑

1. 创建表格标记。
2. 在行上使用 $scope.entities 添加 ng-repeat。
3. 在 table 上运行插件。

问题

第一次运行，一切正常。
当我需要更改 $scope.entities (例如:用户选择另一个列表)

时，问题就开始了

在下面的代码片段中，我创建了更简单的场景，但逻辑是相同的。

步骤

1. 运行代码片段(可能自动完成)。
2. 点击销毁按钮。它将销毁插件并将表格返回到原始 html。
3. 点击添加行。它应该向表中添加行问题是所有行都被删除了而不是添加行。

注意我看到一些与插件(数据表)集成的 Angular Directive(指令)。我无法使用它。我需要理解为什么 View 节点被删除。

angular.module('myApp', []).
controller('ctrl', function($scope, $timeout) {
  $scope.test = 'test';
  
  $scope.generateData = function() { 
    var temp = [];
    for (var i = 0; i < 5; i++) {
      temp.push({
        d1: Math.floor(Math.random() * 10),
        d2: Math.floor(Math.random() * 10),
        d3: Math.floor(Math.random() * 10)
      });
    }
    
    $scope.entities = temp;
    $timeout(function(){
      $scope.dt();  
    });
  };
  
  $scope.dt = function(){
    $timeout(function() {
      if (!$scope.dataTable) {
        $scope.dataTable = $('table').dataTable();  
      }
    });
  }
  
  $scope.destroy = function(){
    if ($scope.dataTable) {
        $scope.dataTable.fnDestroy();
      }
  }
  
  $scope.addRow = function(){
    $scope.entities.push({
        d1: Math.floor(Math.random() * 10),
        d2: Math.floor(Math.random() * 10),
        d3: Math.floor(Math.random() * 10)
      });
  }
  
  $scope.generateData();
});

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js"></script>

<div data-ng-app="myApp" data-ng-controller="ctrl">
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="entity in entities">
        <td data-ng-bind="entity.d1"></td>
        <td data-ng-bind="entity.d2"></td>
        <td data-ng-bind="entity.d3"></td>
      </tr>
    </tbody>
  </table>
    <button data-ng-click="destroy();">Destroy</button>
    <button data-ng-click="addRow();">Add rows</button>
</div>

Answer 1

我相信问题是你对 <tr> 进行了 ng-repeat元素。调用fnDestroy()似乎删除并重新插入 DOM 中的所有原始元素。

我相信因为这个 Angular 失去了对模板的引用，就好像 ng-repeat从一开始就不存在。因为 Angular 本身并没有删除和创建新元素。添加{{entities}}在您的标记中显示数组是正确的并且正在添加新项目。

我不熟悉数据表，所以不知道它是否有需要用 fnDestroy() 销毁的事件等但你不能清空实体数组，以便 Angular 删除表格吗？这样就不会失去它的束缚吗？或者表的结构会改变，标题数量不同等。

编辑:在数据表论坛上找到这篇文章。显然，您可以使用数据表 API 来操作表、添加、删除行等。他们建议，并且我同意，您不应该使用多个库来操作 DOM。一种选择是让 Angular 指示数据表如何处理该表，并让数据表实际操作它。您也可以将其包装在您自己的最小指令或服务中。

https://www.datatables.net/forums/discussion/21286/datatables-and-angularjs#Comment_61703