Tabelle nach einem Einfügen/Aktualisieren in AngularJS aktualisieren

Question

Meine Webanwendung ist eine CRUD, in der eine Liste der Benutzer und Vorgänge enthalten ist (Einfügen, Löschen, ECC). Um einen Benutzer hinzuzufügen, müssen Sie die Felder eines Modales ausfüllen (bootstrap - ui). Das Problem besteht darin, dass die Liste nach dem Einfügen nicht automatisch aktualisiert wird.

Dies ist mein Code: 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' 
     } 
    }); 
} ]); 

Sobald das neue Element hinzufügen, das ist nach Aktualisierung der Seite nur sichtbar und nicht automatisch. Was ist der Code, der eingefügt werden soll, wo ich Ihnen angezeigt habe, dass die Tabelle automatisch aktualisiert wird?

Answer 1

Sie müssen ein neues Element zu $ ​​scope.list in FirstController hinzufügen. Sie aktualisieren $ scope.list nicht, sobald das neue Element hinzugefügt wurde.

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