javascript - 使用模态表单时未更新AngularJS数据表

Question

我正在使用 ASP.NET Boilerplate 创建一个带有 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
            });
        }
    }
]);

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>

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

Answer 1

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 ="";

    }



}]);