ngRepeat不会更新阵列

Question

The Problem

I have a ngMake() function which makes a request to makepost.php and using the user's input it adds a new "post" to the database. This operation is successful, and I know this, because after I fill in the makepost.html form and I refresh the page, the newly created post is there. I want it so that the page needn't be refreshed. As I have gathered Angular's two-way data-binding should take care of this automatically, so maybe I have some problem with the $scope , I've been reading, but I guess because I am a beginner I don't really know what is causing the issue, or if I should create a new function which makes use of $scope.$watch() , I've sort-of tried $scope.$apply() . I don't know, anything would be helpful, thank you.

Factory 'postFactory'

app.factory('postFactory', function($http) {
var postFactory = {
    async: function() {
        var promise = $http.get('server/blog/posts.php')
            .success(function(response) {
                return response;
            })
            .error(function(error, status) {
                $scope.response.error = { message: error, status: status };
                console.log($scope.response.error.status);
            });
        return promise;
    }
};
return postFactory;

});

Inside the blog.controller

postFactory.async().then(function(response) {
    $scope.posts = response.data.Posts;
});

HTML

<div ng-controller="BlogController as blog">
<div class="dont-break-out" ng-repeat="post in posts">
    <a href="#{{post.Slug}}">
        <hr>
        <h4>{{post.Title}}</h4>
        <div ng-bind-html="ngHTML((post.Content | limitTo : 125) + '..')"></div>
    </a>
    <footer class="text-right"> On {{post.DateSubmited}}
        <br> By {{post.UserName}}
    </footer>
</div>
<hr>

The entire project on GitHub

Answer 1

are you sure you are returning the posts list inside a data property?. i read your code in posts.php and i do find an object that holds the list of posts, but it is returned just like that

echo json_encode(array(
        'Posts' => $rows
     ));

and in your js code you are requesting

$scope.posts = response.data.Posts;

maybe it is that you are confused about the kind of promise you are handling at that moment, when you use the $http method it does return a data property, but a normal promise doesn't do that, you access directly the data in your object like this:

$scope.posts = response.Posts;

Answer 2

Your ng-repeat isn't updating because it's always pointing at the original posts array, even when you've gotten a new one.

What happens is that on your initial page load, you get a brand new array (let's call it array1 ) from the server, and you give that array to both your $scope your ng-repeat. When you make a new post and call async() a second time, you get back another brand new array ( array2 ), and you give it to your $scope , but not ng-repeat. It's already got its array; it's happy. It doesn't know or care what $scope thinks the new array is--they can point to completely different lists.

This is a subtle problem you can see a lot with Angular views, and it's one of the reasons you will often see people recommend that you never reference anything in the view without accessing it as a property of something else. That way, when you change the property on the container object, ng-repeat will see the change because it's watching the container object's property rather than just holding its own reference with no connection to anything else.

To solve your issue, you can create a new container object (let's call it data ), and place the posts property on it instead.

So inside your blogController, you would start by declaring

$scope.data = {};

and then your calls to async() would look like

postFactory.async().then(function(response) {
    $scope.data.posts = response.data.Posts;
});

and your ng-repeat would look like

ng-repeat="post in data.posts"

The end result is that ng-repeat will hold onto the reference for data and never let it go, and it will automatically notice and update every time the posts property is changed.

---

As an aside, you don't need the $scope.apply() calls in any of your callback handlers. Angular calls $scope.apply() at the completion of every $http request.