Как я могу обновить Datatable в модальном использовании AngularJS

Question

Я застрял в чем-то простом, что, я думаю, я еще не решил из-за отсутствия опыта. Вот улов у меня есть очень простой контроллер, который загружает данные из службы, когда я сначала загружаю модальный, но как только я попытался использовать операции CRUD (надеюсь, что это работает !!), datatable не обновляется. Я поделюсь кодом. Спасибо всем.

Мне нужно, чтобы после вставки, например, значение обновляемого значения обновляло текущий список элементов.

Зов Modal

vm.openBooksModal = function (authorId) { 
     var modalInstance = $uibModal.open({ 
      templateUrl: '/app/book/index.html, 
      controller: 'BooksController',     
      size: '', 
      resolve: { 
       authorId: function() { 
        return authorId; 
       } 
      } 
     }); 

модальный контроллер

(function() { 
    'use strict'; 
    angular.module('bookApp').controller('BooksController', BooksController); 

    BooksController.$inject = ['$uibModalInstance', '$scope', 'authorId', 'bookService', 'DTOptionsBuilder', 'DTColumnDefBuilder', 
    'DTColumnBuilder', 'dtUtils','alertService']; 

function NotesController($uibModalInstance, $scope, authorId, bookService, DTOptionsBuilder, DTColumnDefBuilder, 
    DTColumnBuilder, dtUtils, alertService) { 

    $scope.authorId= authorId; 

    $scope.book= { 
     id: 0, 
     title:'' 
    }; 


    //if (angular.isDefined())  

    $scope.cancel = function() { 
     $uibModalInstance.dismiss('cancel'); 
    } 

    $scope.dtBooksColumnDefs = [ 
     DTColumnDefBuilder.newColumnDef(0).notSortable() 
    ]; 

    $scope.dtBooksOptions = DTOptionsBuilder   
     .newOptions() 
     .withOption('bFilter', false) 
     .withOption('order', [[2, 'desc']])    
     .withOption('aaSorting', []) 
     .withOption('lengthMenu', [[5, 10, 25, 50], [5, 10, 25, 50]]); 


    $scope.dtBooksInstance = {}; 
    $scope.LoadData = LoadData(); 

    function LoadData(){ 
     return bookService.getBook($scope.authorId).$promise 
     .then(getBookCompleted, handleError); 
    } 

    $scope.save = function (newTitle) { 
     $scope.book.title= newTitle; 
     bookService.saveBook($scope.book.id, $scope.authorId, $scope.book.title).$promise 
      .then(saveBookCompleted, handleError); 

     LoadData(); 
    } 

    $scope.editBook= function(book){ 

     $scope.book= book; 
     $scope.newTitle= book.title; 
    } 

    $scope.deleteBook = function(book){ 
     bookService.deleteBook(book.id).$promise 
        .then(saveBookCompleted, handleError);  

    } 

    //private methods 
    function getBookCompleted(data) {    
     $scope.leadBookList = data; 
     debugger; 
     if (angular.isDefined($scope.dtBookInstance.rerender)) { 
      $scope.dtBooksInstance.rerender();     
     } 

      $scope.book= { }; 
      $scope.newTitle = ''; 
    } 

    function saveBookCompleted() { 
     bookService.getBook($scope.authorId).$promise 
      .then(getBookCompleted, handleError); 
    } 

    function handleError(response) { 
     alertService.error("Error trying to add a Note. Please try again later or contact IT."); 
    } 

} 
})(); 

HTML TEMPLATE

<div class="modal-header"> 
    <h3 class="modal-title">Books</h3> 
</div> 
<div class="modal-body"> 
    <div class="book-container"> 
     <div class="head"> 
     </div> 
     <div class="book"> 
      <div class="form-group"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <label class="control-label">{{headerLabel}}</label> 
         <textarea id="newTitle" class="comment-textarea" data-ng-model="newTitle" rows="8" cols="90"></textarea> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-xs-12">     
        <table id="tblBooks" datatable="ng" class="table table-striped table-bordered font-xs" 
          dt-options="dtBookOptions" dt-column-defs="dtBookColumnDefs" > 
         <thead> 
          <tr> 
           <th></th> 
           <th></th> 
           <th>Title</th> 
           <th>Created By</th> 
           <th>Created Date</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr data-ng-repeat="book in BookList"> 
           <td> 

            <button class="btn btn-sm btn-warning" ng-click="editBook(book)"> 
             <i class="fa fa-pencil"></i> 
            </button> 
            </td> 
            <td> 
            <button class="btn btn-sm btn-danger" ng-click="deleteBook(book)"> 
             <i class="fa fa-trash-o"></i> 
            </button> 

           </td> 
           <td>{{book.title}}</td> 
           <td>{{book.createdBy}}</td> 
           <td>{{book.createdDate | date:'MM/dd/yyyy HH:mm:ss'}}</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
     </div> 
     </div> 
    <div class="modal-footer margin-top-0"> 
    <button class="btn btn-primary" ng-click="save(newBook)" data-ng-disabled="newTitle === ''">Save</button> 
    <button class="btn btn-primary" ng-click="cancel()">Close</button> 
    </div> 

Спасибо

Answer 1

Вы звоните в getBookCompleted дважды. Сначала после сохранения в saveBookCompleted функции и второй в функции loaddata

$scope.save = function (newTitle) { 
     $scope.book.title= newTitle; 
     bookService.saveBook($scope.book.id, $scope.authorId, $scope.book.title).$promise 
      .then(saveBookCompleted, handleError); 

     // remove this line since you're already call saveBookCompleted 
     //LoadData(); 
    }