Angular Datatables ng-click没有约束力（角度方式）

Question

当第一次加载页面时，我得到填充了我的thingsList。但后来我需要选择ng-click选项，它会触发功能doSomething()，它正在获得新的thingsList。我可以在调试模式下看到有一个新列表，但没有绑定和数据表仍然显示旧的thingsList。

我真的很想解决这个问题，没有dtOptions是可能的。

我使用的是非常简单的 “角办法” 与数据表：

<tr ng-repeat="thing in thingsList"> 
    <td>{{thing.id}}</td> 
    <td>{{thing.name}}</td> 
</tr> 

和我的控制器看起来像：

.controller('ThingsController', ['$http', '$scope', function ($http, $scope) { 

    this.getThing = function() { 
     $http.get(....).then(
      function success(response) { 
       $scope.thingsList = response.data; 
      }, 
      function error(data) { 
       console.log(data); 
      } 
     ); 
    }; 

    this.getThings(); 


    this.doSomething = function (id) { 
     $http.get(....).then(
      function success(response) { 
       $scope.thingsList = response.data; 
      }, 
      function error(data) { 
       console.log(data); 
      } 
     ); 
    }; 

}]); 

Answer 1

使用

$scope.thingsList.splice(0); // clears the array without losing reference 
Array.prototype.push.apply($scope.thingsList, response.data); // inserts new data to existing array 

，而不是$scope.thingsList = response.data;在尝试doSomething功能。

Answer 2

所以我猜测它发生的原因是因为每次使用控制器时都会调用getThings（）函数。您可能需要修改您的控制器代码以这种方式尝试：

.controller('ThingsController', ['$http', '$scope', function ($http, $scope) { 

$scope.getThing = function() { 
    $http.get(....).then(
     function success(response) { 
      $scope.thingsList = response.data; 
     }, 
     function error(data) { 
      console.log(data); 
     } 
    ); 
}; 


$scope.doSomething = function (id) { 
    $http.get(....).then(
     function success(response) { 
      $scope.thingsList = response.data; 
     }, 
     function error(data) { 
      console.log(data); 
     } 
    ); 
}; 

}]); 

现在，这将解决，当你选择与NG-点击你的选项，但您的列表将不会被得到加载未更新列表的问题因为getThings（）没有被调用，所以在加载页面时默认是默认的。

我的这一建议是使用使用NG-INIT作为答案说明这个问题： How to execute angular controller function on page load?

或者在你的代码更好的使用$ scope.on以这种方式：

.controller('ThingsController', ['$http', '$scope', function ($http, $scope) { 

$scope.getThing = function() { 
    $http.get(....).then(
     function success(response) { 
      $scope.thingsList = response.data; 
     }, 
     function error(data) { 
      console.log(data); 
     } 
    ); 
}; 

$scope.$on('$viewContentLoaded', function() { 
    $scope.getThing(); 
}) 

$scope.doSomething = function (id) { 
    $http.get(....).then(
     function success(response) { 
      $scope.thingsList = response.data; 
     }, 
     function error(data) { 
      console.log(data); 
     } 
    ); 
}; 

}]); 

如果您使用路由，您可以将'$ viewContentLoaded'更改为'ng route'或'$ stateChangeSuccess'的'$ routeChangeSuccess'，如果您使用ui-router的话。 （不要担心这个，除非你使用路由来改变视图）