perché è questa risorsa non aggiornare la vista dopo aver utilizzato $ cancellare metodo

Question

Nella mia app angolare ho un controller come segue:

function TemplateListControl($scope, TemplateService){ 
    $scope.templates = TemplateService.get(); // Get objects from resource 

    // Delete Method 
    $scope.deleteTemplate = function(id){ 
     $scope.templates.$delete({id: id}); 
    } 
} 

All'interno della vista Ho una tabella questo è legato al templates modello. come segue:

<table ng-model="templates"> 
    <thead> 
     <tr> 
      <th style="width:40%">Title</th> 
      <th style="width:40%">controls</th> 
     </tr> 
    <thead> 
    <tbody> 
     <tr ng-repeat="template in templates"> 
      <td> 
       <!-- Link to template details page --> 
       <a href="#/template/[[template.id]]"> 
        [[template.title]] 
       </a> 
      </td> 
      <td> 
       <!-- Link to template details page --> 
       <a class="btn btn-primary btn-small" 
        href="#/template/[[template.id]]">Edit 
       </a> 
       <!-- Link to delete this template --> 
       <a class="btn btn-primary btn-small" 
        ng-click="deleteTemplate(template.id)">Delete 
       </a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Ora, quando clicco sul link di eliminazione nel modello di cui sopra, si chiama il metodo deleteTemplate ed un successo DELETE chiamata viene effettuata per l'API REST. Ma la vista non viene aggiornata fino a quando non viene aggiornata e $scope.templates = TemplateService.get(); viene avviato nuovamente. Che cosa sto facendo di sbagliato?

Answer 1

È inoltre necessario aggiornare lato client in modo da modificare il codice sorgente, come di seguito

ng-click="deleteTemplate($index)"> 


$scope.delete = function (idx) { 
    var templateid = $scope.templates[idx]; 

    API.Deletetemplate({ id: templateid.id }, function (success) { 
    $scope.templates.splice(idx, 1); 
    }); 
}; 

Answer 2

Si potrebbe passare una funzione di callback per $ risorsa. $ Cancellare

function TemplateListControl($scope, TemplateService){ 
    $scope.templates = TemplateService.get(); // Get objects from resource 

    // Delete Method 
    $scope.deleteTemplate = function(id){ 
    TemplateService.$delete({id: id}, function(data) { 
     $scope.templates = data; 
    }); 
    } 
} 

Attenzione Se la vostra La funzione di eliminazione API REST restituisce un array che devi impostare isArray: true nella tua risorsa $ Angular per evitare un errore di risorsa $ AngularJS - TypeError: Object # non ha metodo 'push'

$resource(URL, {}, { 
    delete: {method:'DELETE', isArray: true} 
}); 

Answer 3

Io preferisco usare le promesse invece di callback. Le promesse sono il nuovo modo di gestire i processi asincroni. È possibile controllare il risultato utilizzando una promessa subito dopo il ritorno dal server.

//Controller 
myApp.controller('MyController', 
    function MyController($scope, $log, myDataService) { 

$scope.entities = myDataService.getAll(); 
$scope.removeEntity = function (entity) {  
     var promise = myDataService.deleteEntity(entity.id); 
     promise.then(
      // success 
      function (response) { 
       $log.info(response); 
       if (response.status == true) { 
        $scope.entities.pop(entity); 
       } 
      }, 
      // fail 
      function (response) { 
       $log.info(response); 
       // other logic goes here 
      } 
     ); 
    }; 
}); 

//DataService 
myApp.factory('myDataService', function ($log, $q, $resource) { 

return { 
    getAll: function() { 
     var deferred = $q.defer(); 
     $resource('/api/EntityController').query(
      function (meetings) { 
       deferred.resolve(meetings); 
      }, 
      function (response) { 
       deferred.reject(response); 
      }); 

     return deferred.promise; 
    }, 

    deleteEntity: function (entityId) { 
     var deferred = $q.defer(); 
     $resource('/api/EntityController').delete({ id: entityId}, 
      function (response) { 
       deferred.resolve(response); 
      }, 
      function (response) { 
       deferred.reject(response); 
      }); 

     return deferred.promise; 
    } 
    }; 
}); 

//Web API Controller 
public class MeetingController : BaseApiController 
{ 
    // .... code omited 

    public OperationStatus Delete(int entityId) 
    { 
     return _repository.Delete(_repository.Single<MyEntity>(e => e.EntityID == entityId)); 
    } 
} 

Nota: $ log, $ q, $ risorsa sono incorporati nei servizi. Spero che aiuti :)