Обновить таблицу после вставки/обновления в AngularJS

Question

My webapp - это CRUD, в котором есть список пользователей и связанных с ними операций (insert, delete, ecc). Чтобы добавить пользователя, необходимо заполнить поля модального (bootstrap-ui). Проблема заключается в том, что список не обновляется автоматически после вставки.

Это мой код: HTML:

... 
ng-repeat="p in list" 
... 

JS:

var app = angular.module('app', [ 'ui.bootstrap', 'ngResource' ]); 

app.controller("FirstController", [ 
     '$scope', 
     'ElementFactory', 
     'ElementsFactory', 
     '$uibModal', 
     function($scope, ElementFactory, ElementsFactory, $uibModal) { 

      $scope.list = ElementsFactory.query(); 

      $scope.add = function() { 

       var modalAddInstance = $uibModal.open({ 
        animation : true, 
        templateUrl : 'addModal.html', 
        controller : 'addModalController', 
        resolve : { 
         element : function() { 
          return $scope.element; 
         } 
        } 
       }); 
      }; 

     } ]); 

app.controller("addModalController", function($scope, $uibModalInstance, 
     ElementsFactory, element) { 

    $scope.element = element; 



    $scope.addCancel = function() { 
     $uibModalInstance.dismiss('cancel'); 
    }; 

    $scope.addElement = function() { 
     ElementsFactory.create($scope.element, function(){ 
      //REFRESH TABLE HERE ********************** 
      $uibModalInstance.close(); 
     }); 



    }; 

}); 

app.factory('ElementsFactory', [ '$resource', function($resource) { 
    return $resource('rest/all', {}, { 
     query : { 
      method : 'GET', 
      isArray : true 
     }, 
     create : { 
      method : 'POST' 
     } 
    }); 
} ]); 

После того, как добавить новый элемент, это видно только после обновления страницы, а не автоматически. Какой код следует вставить, когда я указал вам, что таблица будет автоматически обновляться?

Answer 1

Вам нужно добавить новый элемент в $ scope.list в FirstController. Вы не обновляете $ scope.list после добавления нового элемента.

app.controller("addModalController", function($rootScope,$scope, $uibModalInstance, 
      ElementsFactory, element) { 

     $scope.element = element; 



     $scope.addCancel = function() { 
      $uibModalInstance.dismiss('cancel'); 
     }; 

     $scope.addElement = function() { 
      ElementsFactory.create($scope.element, function(){ 
       //REFRESH TABLE HERE ********************** 
       $rootScope.$broadcast("Element Added"); 
       $uibModalInstance.close(); 
      }); 



     }; 

    }); 

app.controller("FirstController", [ 
     '$scope', 
     'ElementFactory', 
     'ElementsFactory', 
     '$uibModal', 
     function($scope, ElementFactory, ElementsFactory, $uibModal) { 

      $scope.list = ElementsFactory.query(); 

      $scope.add = function() { 

       var modalAddInstance = $uibModal.open({ 
        animation : true, 
        templateUrl : 'addModal.html', 
        controller : 'addModalController', 
        resolve : { 
         element : function() { 
          return $scope.element; 
         } 
        } 
       }); 
      }; 

      $scope.$on("Element Added",function(pevent,padata){ 
      $scope.list = ElementsFactory.query(); 
      }) 
     } ]);