I am new to AngularJS and am having trouble to get resource's promise to re-render the view when the data is loaded. This results in the {{}} getting replaced with blanks (from the promise) but then the view just stays that way.
I have seen a lot of examples of problems with promises being solved with $apply, $digest, $watch etc., and am open to these suggestions be would love to know the root problem with my approach. Here is my controller code
<div ng-controller='pook'>
<p>There are {{posts.length}} posts</p>
<div ng-repeat='post in posts'>
<h3>{{post.title}}</h3>
<div>{{post.text}}</div>
<a href='/readPost/{{post.id}}'>More</a>
| -
<a href='/editPost/{{post.id}}'>Edit</a>
| -
<a href='/deletePost/{{post.id}}'>Delete</a>
</div>
</div>
<script type='text/javascript'>function pook($scope, $http, $route, $routeParams, $resource)
{
/*Approach #1 does work
$http.post('/').success(function(data, status, headers, config)
{
$scope.posts = data.posts;
});
*/
var User = $resource('/');
/*Approach #2 does work
User.save('', function(data)
{
$scope.posts = data.posts;
})
*/
//Approach #3 does NOT work -> renders blanks and never re-renders on loaded data
$scope.posts = User.save().posts
}
</script>
My loaded scripts are
//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js' //ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular-resource.min.js'
Description of the promise behavior that I want is here http://docs.angularjs.org/api/ngResource.$resource
bro!
Change your fetch to:
var User = $resource('/');
$scope.postsResponse = User.$save();
and your bind to:
<div ng-repeat='post in posts'>
<h3>{{postResponse.post.title}}</h3>
<div>{{postResponse.post.text}}</div>
</div>
As angular is based on promises, it is possible to bind the response of an $http or $resource action directly to the HTML, and when it gets resolved, angular changes the properties.
If possible, remove the wrapper from the server response ({posts: []} to []). If you do this, you'll need to hint the resource that the response is an array. Look at the docs for more info.
The error happens because when you call a method on the resource, it returns a hollow object, so there is no .posts at it. But if you bind it to your code, angular will wait until it gets there.
This is all you should do at front end, are you sure the server answers what is expected? Are you sure you need a post to retrieve the data?