dlaczego ten zasób nie aktualizując widok po użyciu $ usuwać metoda

Question

W moim kątowej app Mam kontroler następująco:

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

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

w widoku Mam ów stół związały się templates modelu. w następujący sposób:

<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> 

Teraz, po kliknięciu na link Usuń w powyższym szablonie, to wywołuje metodę deleteTemplate i udane DELETE połączenie jest wykonane API REST. Jednak widok nie jest aktualizowany, dopóki nie zostanie odświeżony i ponownie zostanie zainicjowany $scope.templates = TemplateService.get();. Co ja robię źle?

Answer 1

Trzeba również zaktualizować stronie klienta tak zmodyfikować kod źródłowy jak poniżej

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

Można by przekazać funkcję wywołania zwrotnego do $ zasobu. $ Usuwać

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; 
    }); 
    } 
} 

Attention Jeśli urządzenie Funkcje usuwania API REST zwracają tablicę, którą musisz ustawić isArray: true w swoim źródle Angular $, aby uniknąć błędu zasobów AngularJS $ - TypeError: Object # nie ma metody "push"

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

Answer 3

Wolę używać obietnic zamiast zwrotów. Obietnice to nowy sposób postępowania z procesami asynchronicznymi. Możesz sprawdzić wynik za pomocą obietnicy zaraz po powrocie z serwera.

//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)); 
    } 
} 

Uwaga: $ log, q, $ zasoby są wbudowane w usługi. Mam nadzieję, że to pomaga :)