ngRepeat不会更新阵列

Question

问题

我有一个ngMake()函数，该函数向makepost.php发出请求，并使用用户的输入将新的“ post”添加到数据库中。 该操作成功完成，我知道这一点，因为在我填写makepost.html表单并刷新页面后，新创建的帖子就在那里了。 我想要它，因此无需刷新页面。 当我收集了Angular的双向数据绑定后，该数据应该自动处理，所以也许我在$scope遇到了一些问题，但我一直在阅读，但是我想因为我是一个初学者，所以我真的不知道该怎么做。引起了这个问题，或者如果我应该创建一个使用$scope.$watch()的新函数，我已经尝试了$scope.$apply() 。 我不知道，有什么会有所帮助的，谢谢。

工厂'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;

}）;

在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>

GitHub上的整个项目

Answer 1

您确定要返回数据属性内的帖子列表吗？ 我在posts.php中阅读了您的代码，但确实找到了一个保存帖子列表的对象，但它却像这样返回

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

并在您的js代码中请求

$scope.posts = response.data.Posts;

也许是因为您对当时正在处理的承诺感到困惑，当您使用$ http方法时，它确实返回了data属性，但是普通的Promise却没有这样做，您可以直接访问自己的数据。像这样的对象：

$scope.posts = response.Posts;

Answer 2

您的ng-repeat不会更新，因为它始终指向原始的posts数组，即使您有一个新的数组也是如此。

发生的情况是，在初始页面加载时，您从服务器获得了一个全新的数组（我们称其为array1 ），并将该数组提供给$scope ng-repeat。 当您发布新帖子并再次调用async()时，您会得到另一个全新的数组（ array2 ），并将其提供给$scope ，而不是 ng-repeat。 它已经有了它的数组； 很高兴 它不知道也不关心$scope认为新数组是什么，它们可以指向完全不同的列表。

这是一个微妙的问题，您可以在Angular视图中看到很多，这也是您经常看到人们建议不要在未将视图作为其他属性访问的情况下引用该视图中任何内容的原因之一。 这样，当您更改容器对象的属性时， ng-repeat将看到更改，因为它正在监视容器对象的属性，而不是仅保留其自己的引用而没有任何其他连接。

为了解决您的问题，您可以创建一个新的容器对象（我们称其为data ），然后在其上放置posts属性。

因此，在您的blogController中，您首先要声明

$scope.data = {};

然后您对async()调用看起来像

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

和您的ng-repeat看起来像

ng-repeat="post in data.posts"

最终结果是ng-repeat将保留data的引用，并且永不让它消失，并且每次posts属性更改时，它将自动注意到和更新。

---

顺便说一句，您不需要任何回调处理程序中的$ scope.apply（）调用。 Angular在每个$ http请求完成时调用$ scope.apply（）。