1

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 操作は 1 つだけです。」

4

1 に答える 1