Javascript 使用模式表单时未更新AngularJS数据表

我正在使用ASP.NET样板创建一个带有AngularJS和AngularJS数据表的SPA CRUD应用程序。例如，当我删除一个用户时，一切正常，但是当使用ngDialog添加一个新用户时，即使用户被正确添加并存储在用户数组中，数据表也不会得到更新

AngularJS控制器

angular.module('app').controller('AdminUsersController', [
    '$scope', 'abp.services.app.user', '$modal',
    function ($scope, userService, $modal) {
        var vm = this;

        vm.users = [];
        vm.user = {};

        function fillTable() {
            userService.getUsers({
            }).success(function (result) {
                vm.users = result.items;
                console.log(vm); // User is added to vm.users after vm.save function but table is not updated (only after refresh).
            });
        }
        fillTable();

        vm.deleteUser = function (id) {
            userService.deleteUser({
                id: id
            }).success(function () {
                abp.notify.success('User has been deleted!');
                fillTable(); // Works, table gets updated
            });
        }

        vm.openCreateUserModal = function () {
            $scope.$modalInstance = $modal.open({
                scope: $scope,
                templateUrl: '~/App/views/admin/users/create.cshtml'
            });
        };

        vm.close = function ($event) {
            $scope.$modalInstance.close();
        }

        vm.save = function () {
            userService.createUser(vm.user).success(function () {
                $scope.$modalInstance.close();
                abp.notify.success('User <b>' + vm.user.userName + '</b> has been created!');
                fillTable();
            }).error(function (error) {
                // error handling
            });
        }
    }
]);

angular.module（'app'）.controller（'AdminUsersController'[
“$scope”、“abp.services.app.user”、“$modal”，
函数（$scope，userService，$modal）{
var vm=这个；
vm.users=[]；
vm.user={}；
函数fillTable（）{
userService.getUsers({
}).成功（功能（结果）{
vm.users=result.items；
console.log（vm）；//在vm.save函数之后，用户被添加到vm.users，但表不会更新（仅在刷新之后）。
});
}
fillTable（）；
vm.deleteUser=函数（id）{
userService.deleteUser({
id:id
}).success（函数（）{
abp.notify.success（'用户已被删除！'）；
fillTable（）；//工作正常，表格更新
});
}
vm.openCreateUserModal=函数（）{
$scope.$modalInstance=$modal.open({
范围：$scope，
templateUrl:“~/App/views/admin/users/create.cshtml”
});
};
vm.close=函数（$event）{
$scope.$modalInstance.close（）；
}
vm.save=函数（）{
userService.createUser（vm.user）.success（函数（）{
$scope.$modalInstance.close（）；
abp.notify.success（'User'+vm.User.userName+'已创建！'）；
fillTable（）；
}).错误（函数（错误）{
//错误处理
});
}
}
]);

AngularJS视图：

<div ng-controller="AdminUsersController as vm" ng-app="app">
    <table datatable="ng" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Surname</th>
                <th>Username</th>
                <th>Email</th>
                <th>Creation Date</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in vm.users">
                <td>{{user.name}}</td>
                <td>{{user.surname}}</td>
                <td>{{user.username}}</td>
                <td>{{user.emailAddress}}</td>
                <td>{{user.creationTime}}</td>
                <td class="options">
                    <i class="fa fa-pencil"></i>
                    <i class="fa fa-times" ng-click="vm.deleteUser(user.id)"></i>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Surname</th>
                <th>Username</th>
                <th>Email</th>
                <th>Creation Date</th>
                <th></th>
            </tr>
        </tfoot>
    </table>
</div>

名称
姓
用户名
电子邮件
创建日期
{{user.name}
{{用户.姓氏}
{{user.username}
{{user.emailAddress}
{{user.creationTime}
名称
姓
用户名
电子邮件
创建日期

编辑：我还尝试使用$apply函数，但这导致了一个错误：“在任何时间点，都只能有一个$digest或$apply操作正在进行。”

ProApp.controller（'F1Controller'，['$scope'，function（$scope，AppService）{ $scope.divItem=false

var key;
$scope.editItem = function (item,indx) {

    key = indx;

    $scope.item_id = item.budget_item_id;
    $scope.item_discription = item.budget_item_discription;
    $scope.item_quantity = item.budget_item_quantity;
    $scope.item_unit = item.budget_item_unit;
    $scope.item_rate = item.budget_item_rate;
    $scope.item_discount = item.budget_item_discount; 
    $scope.Action = "Update";
    $scope.divItem = true;
}, function () {
    alert('Error in getting Item records');
    //});
}

$scope.AddNew = function () {

    budget_item_quantity: $scope.item_quantity, 
    $scope.item_id,
    $scope.item_discription = '';
    $scope.item_quantity = '';
    $scope.item_unit = '';
    $scope.item_rate = '';
    $scope.item_discount = '';
};

$scope.AddUpdateItem = function (item_id, item_discription, item_quantity, item_unit, item_rate, item_discount) {

    var getItemAction = $scope.Action;

    if (getItemAction == "Update") {

        $scope.AddRecord[key].budget_item_id = item_id;
        $scope.AddRecord[key].budget_item_discription = item_discription;
        $scope.AddRecord[key].budget_item_quantity = item_quantity;
        $scope.AddRecord[key].budget_item_unit = item_unit;
        $scope.AddRecord[key].budget_item_rate = item_rate;
        $scope.AddRecord[key].budget_item_discount = item_discount; 

        $scope.divItem = false; 
        ClearFields();
    } else
    {
        var item = { 'budget_item_id': $scope.item_id, 'budget_item_discription': $scope.item_discription, 'budget_item_quantity': $scope.item_quantity, 'budget_item_unit': $scope.item_unit, 'budget_item_rate': $scope.item_rate, 'budget_item_discount': $scope.item_discount };
        $scope.AddRecord.push(item);

        ProApp.addItem(item);//call service to send data to server
        ClearFields();


    }
    }


    $scope.AddItemDiv = function () {
        ClearFields();
        $scope.Action = "Add";
        $scope.divItem = true;
    }


    $scope.deleteItem = function (item_id) {
        $scope.AddRecord.splice(item_id, 1);
    };


    $scope.AddRecord = [];


    $scope.Cancel = function () {
        $scope.divItem = false;
    };

    function ClearFields() {
        $scope.item_id = "";
        $scope.item_discription = "";
        $scope.item_quantity = "";
        $scope.item_unit = "";
        $scope.item_rate = "";
        $scope.item_discount ="";

    }



}]);

ProApp.controller（'F1Controller'，['$scope'，函数（$scope，AppService）{ $scope.divItem=false

var key;
$scope.editItem = function (item,indx) {

    key = indx;

    $scope.item_id = item.budget_item_id;
    $scope.item_discription = item.budget_item_discription;
    $scope.item_quantity = item.budget_item_quantity;
    $scope.item_unit = item.budget_item_unit;
    $scope.item_rate = item.budget_item_rate;
    $scope.item_discount = item.budget_item_discount; 
    $scope.Action = "Update";
    $scope.divItem = true;
}, function () {
    alert('Error in getting Item records');
    //});
}

$scope.AddNew = function () {

    budget_item_quantity: $scope.item_quantity, 
    $scope.item_id,
    $scope.item_discription = '';
    $scope.item_quantity = '';
    $scope.item_unit = '';
    $scope.item_rate = '';
    $scope.item_discount = '';
};

$scope.AddUpdateItem = function (item_id, item_discription, item_quantity, item_unit, item_rate, item_discount) {

    var getItemAction = $scope.Action;

    if (getItemAction == "Update") {

        $scope.AddRecord[key].budget_item_id = item_id;
        $scope.AddRecord[key].budget_item_discription = item_discription;
        $scope.AddRecord[key].budget_item_quantity = item_quantity;
        $scope.AddRecord[key].budget_item_unit = item_unit;
        $scope.AddRecord[key].budget_item_rate = item_rate;
        $scope.AddRecord[key].budget_item_discount = item_discount; 

        $scope.divItem = false; 
        ClearFields();
    } else
    {
        var item = { 'budget_item_id': $scope.item_id, 'budget_item_discription': $scope.item_discription, 'budget_item_quantity': $scope.item_quantity, 'budget_item_unit': $scope.item_unit, 'budget_item_rate': $scope.item_rate, 'budget_item_discount': $scope.item_discount };
        $scope.AddRecord.push(item);

        ProApp.addItem(item);//call service to send data to server
        ClearFields();


    }
    }


    $scope.AddItemDiv = function () {
        ClearFields();
        $scope.Action = "Add";
        $scope.divItem = true;
    }


    $scope.deleteItem = function (item_id) {
        $scope.AddRecord.splice(item_id, 1);
    };


    $scope.AddRecord = [];


    $scope.Cancel = function () {
        $scope.divItem = false;
    };

    function ClearFields() {
        $scope.item_id = "";
        $scope.item_discription = "";
        $scope.item_quantity = "";
        $scope.item_unit = "";
        $scope.item_rate = "";
        $scope.item_discount ="";

    }



}]);

---

您可以从

~/App/views/admin/users/create.cshtml

共享您的标记吗？您可以从

~/App/views/admin/users/create.cshtml

共享您的标记吗？