AngularJS Datatable не обновляется при использовании модальной формы

Question

Я использую ASP.NET Boilerplate для создания приложения SPA CRUD с привязкой к AngularJS и AngularJS. Когда я, например, удаляю пользователя, все работает нормально, но при добавлении нового пользователя, использующего ngDialog, datatable не обновляется, даже когда пользователь правильно добавляется и сохраняется в массиве пользователей.

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> 

EDIT: Я также попытался с помощью $ применить функцию, но это приводит к ошибке: «В любой момент времени может быть только одна операция $ digest или $ применяется в процессе ".

Answer 1

ProApp.controller ('F1Controller', [ '$ сфера', функция ($ сфера, AppService) { $ scope.divItem = ложь;

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

    } 



}]);