Geek Answers Handbook

Why this resource does not update the view after using the $ delete method

In my angular application, I have a controller as follows:

function TemplateListControl($scope, TemplateService){ $scope.templates = TemplateService.get(); // Get objects from resource // Delete Method $scope.deleteTemplate = function(id){ $scope.templates.$delete({id: id}); } }

In the view, I have a table bound to the templates model. in the following way:

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

Now, when I click the delete link in the above template, it calls the deleteTemplate method and a successful DELETE call is executed in the REST api. But the view is not updated until it is updated, and $scope.templates = TemplateService.get(); will be initiated again. What am I doing wrong?

+6
source share
3 answers

You also need to update the client side to change the source code below.

  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); }); };
+1
source

I prefer using promises instead of callbacks. promises is a new way to handle asynchronous processes. You can check the result using the promise immediately after it returns from the 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)); } }

Note. Services have built-in $ log, $ q, $ resource. Hope this helps :)

+3
source

You can pass the callback function to $ resource. $ delete

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

Caution If your REST API function removes the function, it returns an array that you must set isArray: true in your Angular $ resource in order to avoid an AngularJS $ resource error - TypeError: Object # does not have a 'push' method

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

More articles:


All Articles