Question

我的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

您需要在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中插入/更新后刷新表

1 个答案: