$resource not updating the view

I have a very simple resource as follows:

angular.module('ExampleServices', ['ngResource']).

        factory('NoteService', function($q, $rootScope, $resource){
        var baseurl = "/api/v1/note/";
        var Note = $resource(baseurl, {}, {

            // get notes method    
            get_for_model: {
                method: 'GET',
                params:{user: '', object_id: ''},
                isArray: false
            },

            // leave note method
            leave_note: {
                method: 'POST',
            }

        });
        return Note
    }
);

And within a controller i call the leave_note method as follows:

$scope.note = function(){
        $scope.note = NoteService.leave_note({
            desc: desc,
            title: title,
            object_id: oid,
        }); 
    }

This basically calls the POST method to my applications rest API and the objects get created. Once the page is refreshed i can see the note listed in the notes . But as to my knowledge $resource should update the view on its own.

Quote from the docs

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.

I am not able to use $rootScope.$apply within the leave_note method until i define it as a function (as follows:)

leave_note: function(){
    var note = New Note();
    note.desc = desc;
    note.title = title;
    note.object_id = oid;
    note.$save();
    $rootScope.$apply();
}

but in the above case the call send to the REST api has an undefined request method.

Another problem that i can think of is that I don't have $scope.note defined but have $scope.notes which is the list of notes sent by the REST api. So maybe $scope.note is being updated but as i am not rendering the note object but rendering notes using ng-repeat in the templates i am unable to see the changes in the template.

I also tried re-fetching the notes object once a new note is saved, but it basically removes all the notes and then re-render all of them which looks ugly (almost like a page refresh).

What I am trying to achieve is as soon as a note object is saved, i want the new note to be merged into existing notes. Please guide me. Thanks

---

You don't need to use $rootScope.$apply , your miss understood the $resource API docs.

As the $resource documentation mentions: "Once the data is returned from the server the existing reference is populated with the actual data.". This means that when you do $scope.notes = NoteService.get_for_model(); you are asking for $scope.notes to be populated with the (future) data received from the NoteService.get_for_model GET request. The $resource API will be responsible for doing exactly that - update the $scope.notes model - nothing more. Note that it does not mention that your data will be updated automatically when you do a POST on that same service.

If you want to update your $scope.notes model after adding a new note (POST), and don't want to request the entire notes list, try adding the new note directly to your $scope.notes model on the POST success callback:

 var note = NoteService.leave_note({
            desc: desc,
            title: title,
            object_id: oid,
        }, function() {
            $scope.notes.push(note.$get());                
        }
 );

Note that this can be greatly improved (ie avoid the $get ) but since I don't know the exact details of your implementation I've just provided a generic solution.

链接地址: http://www.djcxy.com/p/89550.html

上一篇: 在$资源上发送请求正文

下一篇: $资源没有更新视图