在 AngularJS 中的 insert/update 之后刷新 table

Question

我的网络应用程序是一个 CRUD，其中有一个用户列表和与之关联的操作（插入、删除、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'
        }
    });
} ]);

添加新项目后，这仅在页面刷新后可见，不会自动显示。我向您指出 table 将自动更新的位置要插入的代码是什么？

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

在 AngularJS 中的 insert/update 之后刷新 table

Refresh table after an insert/update in AngularJS

resources

angularjs