Блог

У меня есть $scope.users , который отображает некоторые элементы.

Когда я нажимаю на один из этих элементов, появляется модальное сообщение для подтверждения удаления. Запрос на удаление отлично работает, но my $scope.users не обновляется в представлении… Я думаю, это потому $scope.users , что это не тот же контроллер.

Каково решение для обновления области видимости? (без использования $rootscope)?

 app.controller('backController', ['$scope', '$http', '$rootScope','MyFunctions', '$location', '$modal',
  function ($scope, $http, $rootScope, MyFunctions, $location, $modal) {
    MyFunctions.getUsers().then(function (data) {
      $scope.users = data;
    });

    $scope.openModalDeleteUser = function (user) {
      $scope.user = user;
      var modalInstance = $modal.open({
        templateUrl: 'template/app/modalDeleteUser.html',
        controller: 'modalDeleteUserController',
        scope: $scope,
      });
    };

}]);


app.controller('modalDeleteUserController', ['$scope', '$modalInstance', 'MyFunctions',
  function ($scope, $modalInstance, MyFunctions) {

    $scope.delete = function(){
      var data = {};
      data['action'] = 'delete_user';     
      MyFunctions.updateData(data).then(function (response){
        MyFunctions.getUsers().then(function (data) {
          $scope.users = data;
          console.log($scope.users); // Data retrieve is OK, but not updated in the view
        });
      });
      $modalInstance.dismiss('cancel');
    }  

    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
}]);
  

Попробуйте:

 MyFunctions.getUsers().then(function (data) {
      $scope.users.length = 0; //empty the current array
      $scope.users.push.apply($scope.users,data); //push the data array to current array.
});
  

Объяснение:

$scope в вашем modalDeleteUserController является дочерней областью вашей backController области. Когда вы назначаете $scope.users = data; , оно создает новое свойство в вашей дочерней области без обновления родительской области. Текущее решение очищает данные из унаследованного свойства и добавляет к нему новые данные, чтобы родительская область была обновлена.

Из документации:

scope — экземпляр области, который будет использоваться для модального содержимого (на самом деле $modal service собирается создать дочернюю область предоставленной области). По умолчанию используется значение $rootScope

Другим решением является объявление свойства для зависания ваших данных:

 app.controller('backController', ['$scope', '$http', '$rootScope','MyFunctions', '$location', '$modal',
  function ($scope, $http, $rootScope, MyFunctions, $location, $modal) {
    $scope.data = {};//declare a property
    MyFunctions.getUsers().then(function (data) {
      $scope.data.users = data; //store users as a property of this property
    });
  

И тогда вы можете просто использовать $scope.data.users = data; в своем модальном modalDeleteUserController

Примечание: Не забудьте обновить привязки вашего шаблона, чтобы добавить эти .data префиксы.