How to update a list after a database operation in AngularJS -
i've got simple crud app running on linux server apache , mysql. database operations done php scripts. crud operations working fine, server on different machine developing machine.
everything fine, when try list items in database after create, update or delete operation, list updates , doesn't.
here's code.
index.html:
<body ng-controller="getscenesctrl"> <ul> <li ng-repeat="scene in scenes"> <em><a href="#/getscene/{{scene.scene_id}}">{{scene.scene_name}}</a></em> </li> </ul> service:
angular.module('writservices', ['ngresource']) .factory('scenes', function($resource){ return $resource('/:id/:nimi/:sisalto/:pics', {}, { query: { url:'php/getscenes.php', method:'get', isarray:true } }); app.service('scenesservice', function ($rootscope, scenes) { var scenes = []; this.setscenes = function() { scenes = scenes.query(); $rootscope.$broadcast('updscenes', scenes); }; this.getscenes = function() { scenes = scenes.query(); return scenes; }; }); controller:
app.controller('getscenesctrl', function($scope, scenes, scenesservice) { $scope.scenes = scenes.query(); //$scope.scenes = scenesservice.setscenes(); //$scope.scenes = scenesservice.getscenes(); //$scope.$on('updscenes', function(event, scenes) { // $scope.scenes = scenes; //}); $scope.updatescenes = function() { $scope.scenes = scenes.query(); }; }); ok, when index.html first time loads use scenes.query() method initialize list. updatescenes() -method called after crud -operation update scope. call controller. this:
app.controller('addscenectrl', function($scope, scenes, scenesservice) { $scope.addscene = function(scene) { scenes.add({ nimi : scene.name, sisalto : scene.content }); $scope.updatescenes(); //$scope.scenes = scenesservice.getscenes(); //scenesservice.setscenes(); } }); another way of updating scope i've tried broadcasting way, , both ways work leaving list unupdated. why this? there must better way, angular way, of doing this. i'm rather newbie angular, there must i've missed here.
stone
to followup on comment @duncan, here's quote the documentation:
it important realize invoking $resource object method returns empty reference (object or array depending on isarray). once data returned server existing reference populated actual data. useful trick since resource assigned model rendered view. having empty object results in no rendering, once data arrives server object populated data , view automatically re-renders showing new data. means in case 1 never has write callback function action methods.
the action methods on class object or instance object can invoked following parameters:
http "class" actions: resource.action([parameters], [success], [error]) non-get "class" actions: resource.action([parameters], postdata, [success], [error]) non-get instance actions: instance.$action([parameters], [success], [error]) success callback called (value, responseheaders) arguments. error callback called (httpresponse) argument.
so, should do:
scenes.add( { nimi : scene.name, sisalto : scene.content }, function() { // function invoked when add successful $scope.updatescenes(); }); or simply
scenes.add( { nimi : scene.name, sisalto : scene.content }, $scope.updatescenes);
Comments
Post a Comment