AngularJS에서 삽입/업데이트 후 테이블 새로 고침

Question

내 webapp는 사용자 및 작업과 관련된 목록 (삽입, 삭제, ecc)이있는 CRUD입니다. 사용자를 추가하려면 모달 필드 (부트 스트랩 - 사용자)를 입력해야합니다. 문제는 삽입 후 목록이 자동으로 업데이트되지 않는다는 것입니다. 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

FirstController의 $ scope.list에 새 항목을 추가해야합니다. 새로운 항목이 추가되면 $ 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(); 
      }) 
     } ]);