Nach dem Löschen von Datensätzen aus der Datenbank kann nicht trainiert werden, wie die Winkeldatentabelle neu geladen wird

Question

Ich kann nicht herausfinden, wie ich meine Angular-Datatable neu zeichnen kann, nachdem ich einen Datensatz aus meiner Datenbank gelöscht habe. Ich bekomme keine Fehler, aber die Tabelle scheint nie neu zu zeichnen, wenn ich die Seite nicht manuell aktualisiere. Ich habe versucht, mit vielen Beispielen aus der Website-Dokumentation zu arbeiten.

Ich habe meine Datentabelle:

  $scope.dtInstance = {}; 
      $scope.selectedItems = []; 
      $scope.toggleItem = toggleItem; 
      $scope.reloadData = reloadData; 

      // Build the User table 
      $scope.dtOptions = DTOptionsBuilder 
       .fromFnPromise(function() { 
        var deferred = $q.defer(); 
        deferred.resolve(users); 
        return deferred.promise; 
       }) 
       .withBootstrap() // Style with Bootstrap 
       .withOption('responsive', true) 
       .withDisplayLength(15) // Show 15 items initially 
       .withOption('order', [0, 'asc']) // Sort by the first column 
       .withOption('lengthMenu', [15, 50, 100]) // Set the length menu items 
       .withOption('createdRow', function(row, data, dataIndex) { 
        // Recompiling so we can bind Angular directive to the DT 
        $compile(angular.element(row).contents())($scope); 
       }) 
       .withOption('headerCallback', function(header) { 
        if (!$scope.headerCompiled) { 
         // Use this headerCompiled field to only compile header once 
         $scope.headerCompiled = true; 
         $compile(angular.element(header).contents())($scope); 
        } 
       })    
       .withOption('fnRowCallback', formatCell); 
      $scope.dtColumns = [ 
       DTColumnBuilder.newColumn(null).withTitle('Username').withClass('col-md-2').renderWith(createUsernameHyperlink), 
       DTColumnBuilder.newColumn('Email').withTitle('Email'), 
       DTColumnBuilder.newColumn('Level').withTitle('Role').withClass('col-md-2'), 
       DTColumnBuilder.newColumn('LastConnected').withTitle('Last Accessed'), 
       DTColumnBuilder.newColumn('Verified').withTitle('Account Verified').withClass('col-md-2'), 
       DTColumnBuilder.newColumn(null).withTitle('') 
        .notSortable() 
        .renderWith(function(data, type, full, meta) { 
         return '<input type="checkbox" ng-click="toggleItem(' + data.Id + ')" />'; 
        }).withClass("text-center")  
      ]; 

     // Reload the datatable 
     function reloadData() { 

      var resetPaging = false; 
      $scope.dtInstance.reloadData(callback, resetPaging); 

     }; 

     function callback(json) { 
      console.log(json); 
     }; 

Und dann habe ich meine Löschfunktion, die in dem gleichen Controller sitzt. Rufen Sie reloadData() auf eine erfolgreiche Antwort von dem Dienst auf. Ich kann aus der console.log sehen, dass es die Funktion korrekt aufruft, aber nichts passiert.

$scope.deleteUser = function(selectedItems) { 

      swal({ 
       title: 'Are you sure?', 
       text: 'Are you sure you want to delete the selected account profile(s)? This process cannot be undone...', 
       type: 'warning', 
       showCancelButton: true, 
       confirmButtonText: 'Delete', 
       confirmButtonColor: "#DD6B55", 
       closeOnConfirm: false, 
       allowEscapeKey: true, 
       showLoaderOnConfirm: true 
      }, function() { 

       setTimeout(function() { 

        // Delete user 
        UsersService.deleteUser(selectedItems.toString()) 
         .then(function(data) { 
          // Show a success modal 
          swal({ 
           title: 'Success', 
           text: 'User has been deleted!', 
           type: 'success', 
           confirmButtonText: 'Close', 
           allowEscapeKey: false 
          }, function() { 

           reloadData(); //<== Calls the function but doesn't do anything 
           //$state.go('users'); 

          }); 
         }, function() { 
          // Show an error modal 
          swal({ 
           title: 'Oops', 
           text: 'Something went wrong!', 
           type: 'error', 
           confirmButtonText: 'Close', 
           allowEscapeKey: true 
          }); 
         }); 

       }, 1000); 

      }); 

     }; 

Ich frage mich nur, ob ich einen Schritt verpasst habe?

Answer 1

Wie von @davidkonrad in einem früheren Kommentar und mehr vom Angular-Datatable's Autor vorgeschlagen, habe ich meinen Inhalt nicht neu geladen, als ich versuchte, meine Tabelle neu zu zeichnen. Obwohl ich meine Daten (users) von einem injizierten Dienst referenzierte, wurde es nie innerhalb des Controllers aktualisiert und so unterschied sich der Inhalt meiner Tabelle nie.

Der Autor schlug vor, dass die Daten aus einem Versprechen, das eine HTTP-Anfrage macht, vorzuziehen sind, wodurch weitere Aufrufe des Versprechens jedes Mal möglich sind, wenn die Tabelle neu gezeichnet wird.

Anstatt also diese:

// Build the User table 
      $scope.dtOptions = DTOptionsBuilder 
       .fromFnPromise(function() { 
        var deferred = $q.defer(); 
        deferred.resolve(users); 
        return deferred.promise; 
       }) 
       .withBootstrap() // Style with Bootstrap 

Ich änderte es dazu:

// Build the User table 
      $scope.dtOptions = DTOptionsBuilder 
       .fromFnPromise(function() { 
        return UsersService.getUsers(); 
       }) 
       .withBootstrap() // Style with Bootstrap 

die jetzt auf jeden meinem Tisch fein aktualisiert Ereignis mit einem Aufruf an $scope.dtInstance.reloadData();

Mein Github neu zeichnen Post kann gefunden werden here

Answer 2

setTimeout Funktion funktioniert außerhalb des eckigen Digest-Zyklus, da es async ist. Wenn Sie Aktionen ausführen möchten, die innerhalb eines Timeouts für den eckigen Digest-Zyklus ausgeführt werden, sollten Sie stattdessen $timeout verwenden.

Eine andere Option ist $scope.apply(), aber dies wird nur die $timeout Funktion nachahmen.

Bitte beachten Sie, dass Sie $timeout in Ihren Controller injizieren müssen.