Угловые Datatables ng-click не дает привязки (Угловой путь)

Question

Когда страница загружается с первого раза, я получаю мой thingsList заполненный. Но тогда мне нужно выбрать опцию с ng-click, она запускает функцию doSomething(), которая становится новой thingsList. В режиме отладки я вижу, что есть новый список, но нет привязки и datatables, которые все еще показывают мне старый thingsList.

Я действительно хотел бы решить это без использования dtOptions.

Я использую довольно простой "угловой путь" с DataTables:

<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); 
     } 
    ); 
}; 

}]); 

Теперь это решит вашу проблему в списке не обновляется, когда вы выбираете вариант с нг-клик, но ваш список не будут загружены default, когда вы загружаете страницу, поскольку getThings() не вызывается.

Мое предложение для этого было бы использовать использование нг-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» на «$ routeChangeSuccess» для ng-route или «$ stateChangeSuccess», если вы используете ui-router. (Не беспокойтесь об этом, если вы не используете маршруты для изменения видов)