Javascript AngularJs-如何在向datatable添加新数据后重新加载页面

我对angularjs和使用angularjs引导数据表非常陌生。现在，当我将新记录添加到我的datatable时，它正在mysql数据库中更新，但我需要重新加载我的页面，这样新记录也可以显示在表中，但我不知道如何做。有人能帮我吗？我可以在ui-bootstrp.js中的addRoleData（）成功时初始化tableRoleCtrl吗

这是我的密码

ui-bootstrap.js

.controller('ModalInstanceCtrl', function ($scope, $modalInstance, content, tableService) {

        //add new role
        $scope.addRole = function(w) {
            tableService.addRoleData(w)
        }
})

table.js

.controller('tableRoleCtrl', function($filter, $sce, ngTableParams, tableService) {
        //var data = tableService.data;

        var self = this; 
        var promise = tableService.getRoleData();
        self.data = [];

        promise.then(
            function(payload) { 

                self.data = payload.data;
                //alert(JSON.stringify(self.data));
                //console.log("test" + self.data)

                self.tableEdit = new ngTableParams({
                    page: 1,            // show first page
                    count: 10           // count per page
                }, {
                    total: self.data.length, // length of data
                    getData: function($defer, params) {
                        $defer.resolve(self.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    }
                });

            },
            function(errorPayload) {
              $log.error('failure loading movie', errorPayload);
            }); 

        //to updaate data   
        self.updateRole = function(w) {
            tableService.updateRoleData(w); 
        }

    })

service.js

.factory('tableService', ['$http', function($http){
        var _this = this;
        return { 

            // role
            getRoleData: function() {
                return $http.get("data/getRoles.php");
            },
            updateRoleData: function(w) {
                $http.post("data/updateRole.php", w)
            },
            addRoleData: function(w) {
                $http.post("data/addRole.php", w)
            }
        }
    }])

html

添加角色


使用来自
人力资源
雇员
管理


提交
取消
添加角色

当数据更新时，实际上不需要重新加载页面，AngularJS是MVC框架，每个模型AngularJS将创建一个观察者来更新视图

---

基本上，您只需要将表数据存储到控制器中的范围变量

$scope.tableData

，然后使用

ng repeat=“row in tableData”

迭代表数据

ng repeat

将监视您的

tableData

更改，然后更新您的表格。

如果动态更改了ngTable数据，您可以使用以下命令刷新它：

self.tableEdit.reload();

---

我正在视图中使用ng repeat，但在添加新记录后，如何在$scope.tableData中存储新数据？正如您所见，我没有在tableRoleCtrl中使用$scope变量，那么如何使用控制器变量呢？您是否也可以通过模板片段？如上所述，

ng repeat

有一个监视程序将在更新

$data

后更新您的视图。由于您的

updateRoleData

或

addRoleData

直接更新mysql数据库，并且基于您的

tableRoleCtrl

仅在初始化控制器时获取数据。所以，您需要做的是保持您的

$data

从数据库更新到最新，这取决于您的设计。我不建议在调用

updateRoleData

或

addRoleData

时直接更新$data，最好在合理的时间段内使用$interval（）池

getRoleData

$addRoleData成功后的state.reload（）对我很有用。但是我从ui-bootstrap.js添加数据，self.tableEdit在table.js中，那怎么可能呢？

self.tableEdit.reload();