AngularJS中DataTables重载报错TypeError: o.ngDestroy is not a function求助

我之前在使用同版本的angular-datatables时也碰到过这个问题，这个错误本质是当你直接替换绑定的数组时，旧的DataTables行元素没有被正确销毁，导致框架在清理DOM时找不到对应的ngDestroy方法。给你几个可行的解决思路：

方案一：避免直接替换数组，操作数组元素而非替换引用 #

直接替换$scope.AllProducts = response.data.ResponseData会让angular-datatables无法追踪到数组内部的变化，转而尝试销毁整个旧实例，这在0.6.2版本里容易触发bug。改成清空原数组再逐个添加新元素：

var getAllProducts = function () { 
  var urlgetAllProducts = apiURL + "/AllProducts?providerId=" + providerID; 
  $http({ 
    url: urlgetAllProducts, 
    method: 'GET'
  }).then(function successcallback(response) { 
    // 清空原数组，保留引用
    $scope.AllProducts.length = 0;
    // 逐个添加新数据
    angular.forEach(response.data.ResponseData, function(product) {
      $scope.AllProducts.push(product);
    });
    $scope.$parent.AllProducts = $scope.AllProducts; 
    if ($scope.offer.ProductList != undefined) { 
      MakeSelected(); 
      $scope.selectProducts(); 
    } 
  }, function errorcallback(response) { 
    // 错误处理
  }); 
}

方案二：使用DataTables原生的reloadData方法 #

配置dt-options时开启destroy选项，并在数据更新后手动调用重载：

首先在控制器注入DTOptionsBuilder，调整dt-options配置：

$scope.dataTableOpt = DTOptionsBuilder.newOptions()
  .withOption('destroy', true) // 允许销毁旧实例
  .withOption('retrieve', true); // 允许获取已存在的实例

然后在getAllProducts的成功回调末尾添加：

// 获取DataTables实例并重载数据
var dtInstance = $('#dtProducts').DataTable();
dtInstance.reloadData(null, false); // false表示保持当前分页/排序状态

方案三：确保DOM完全销毁后再重新渲染 #

利用$applyAsync让AngularJS先完成旧DOM的销毁，再渲染新数据：

$http({ 
  url: urlgetAllProducts, 
  method: 'GET'
}).then(function successcallback(response) { 
  // 先清空数据，触发ng-if销毁表格
  $scope.AllProducts = null;
  // 等待下一个digest循环完成后再赋值新数据
  $scope.$applyAsync(function() {
    $scope.AllProducts = response.data.ResponseData;
    $scope.$parent.AllProducts = $scope.AllProducts; 
    if ($scope.offer.ProductList != undefined) { 
      MakeSelected(); 
      $scope.selectProducts(); 
    } 
  });
});

额外注意点 #

• 检查你的dt-rows和ng-repeat的配合：0.6.2版本中dt-rows指令和ng-repeat可能存在冲突，尝试把<tr dt-rows ng-repeat="product in AllProducts">改成<tr dt-row ng-repeat="product in AllProducts">（单个dt-row而非dt-rows）。
• 确保依赖版本匹配：angular-datatables 0.6.2需要搭配jQuery 1.12+、DataTables核心库1.10.x版本，版本不匹配也可能引发这类DOM销毁问题。

内容的提问来源于stack exchange，提问作者Sana