Currently, I am utilizing ASP.NET Boilerplate to develop a Single Page Application (SPA) CRUD application that integrates AngularJS and AngularJS Datatable. A peculiar issue arises when I try to add a new User using ngDialog; although the user is successfully added and stored in the users array, the datatable fails to update accordingly.
AngularJS Controller
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 View:
<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>
In an attempt to resolve this issue, I experimented with the $apply function but encountered an error stating "At any point in time there can be only one $digest or $apply operation in progress."