current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

Here's my View

<div ng-repeat="blog in blogs">
<h3>{{blog.title}}</h3>
<h4>{{blog.post}}</h4>
</div>

My Controller Code:

   demoApp.controller('myController', ['$scope', 'blogService', function ($scope,   
    blogService)
    {
        $scope.blogs = blogService.getBlogs();
    }]);

My code in the service. This includes asynchronous call to Parse.com javascript sdk.

this.getBlogs = function () 
{        
   var BlogPost = Parse.Object.extend("BlogPost");
   var blogPost = new BlogPost();
   var blogs  = [];
    var query = new Parse.Query(BlogPost);
    query.find({
        success: function(results) {
            console.log(results[0].get("title"));
            for (var i = 0; i < results.length; i++)
            {
                blogs.push(
                    {
                        title : results[i].get("title"),
                        post : results[i].get("post")
                    });
            }
            console.log(blogs);
        },
        error: function(error) {
            alert("Error: " + error.code + " " + error.message);
        }
    });
    return blogs;
}; });

The console log console.log(blogs); is showing returned data perfectly. Just the view is not getting updated after this value is fetched.

share|improve this question
    
did u updated ng-app as demoApp to your html <html ng-app="demoApp"> and ng- controller to the parent div of your code –  saikiran 15 hours ago
add comment

2 Answers

up vote 0 down vote accepted

The code in the callbacks executes "outside of Angular's world", which means the $digest loop will not be triggered and changes will not be reflected in the DOM.

You need to use $apply:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

Inject $rootScope in your service and for example:

success: function(results) {
  $rootScope.$apply(function () { 
    console.log(results[0].get("title"));
    for (var i = 0; i < results.length; i++)
    {
        blogs.push(
            {
                title : results[i].get("title"),
                post : results[i].get("post")
            });
    }
    console.log(blogs);
  });
},
share|improve this answer
    
Oh this helped! I was stuck at this for 2 hours! Thanks a lot :-) :-) :-) It is working perfectly now :-) –  Vishwajeet Vatharkar 15 hours ago
    
You're welcome :) –  tasseKATT 15 hours ago
add comment
up vote 0 down vote

Your "success" callback executes asynchronously and angular doesn't know when it happens. To inform angular about the success callback you could wrap it in $scope.$apply

success: function(results) {
    $scope.$apply(function() {
        console.log(results[0].get("title"));
        for (var i = 0; i < results.length; i++)
        {
            blogs.push(
                {
                    title : results[i].get("title"),
                    post : results[i].get("post")
                });
        }
        console.log(blogs);
    });
}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.