AngularJS, ng-repeat 不重复

Question

我是 AngularJs 的新手，我遇到了 ng-repeat 的问题。基本上，我想使用 ajax 从我的数据库中获取与文章相关的评论，然后使用 ng-repeat 显示它们。然后我有一个数组，我在其中推送我的评论。我的问题是，当我在数组中手动创建评论时，效果很好，但如果我从 ajax 函数的回调中自动推送此评论，数组会更新，但我的视图不会更新。

在 html 中查看：

var articleApp = angular.module('articleApp', []);
articleApp.controller('CommentsController', function CommentsController($scope) {
    $scope.comments = [];
    // This push works well, my view is updated
    $scope.comments.push({
        content: "Hello world !",
        date: "2 minutes ago",
        id: 29,
        author: {
            pseudo: "Sean"
        }
    });
    // When I push with this function, my array is updated, but not the view
    $scope.addComment = function(comment) {
        $scope.comments.push({
            content: comment.comment,
            id: comment.id,
            date: comment.date_post,
            author: {
                id: comment.author.id,
                pseudo: comment.author.pseudo
            }
        });
    };
    var articleID = document.getElementById('articleID').textContent;
    // getComments is defined elsewhere, and returns the 20 first comments
    getComments(20, articleID, 0, function(comments) {
        for(var i = 0; i < comments.length; i++) {
            $scope.addComment(comments[i]);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section id="commentsSection" class="bottom_apps" ng-controller="CommentsController as comments">
  <article id = "{{comment.id}}" class="comment_container" ng-repeat="comment in comments">
    <div class="comment_header">
      <span class="comment_author">{{comment.author.pseudo}}</span>
      <span class="comment_date">{{comment.date}}</span>
    </div>
    <div class="comment_content">
      {{comment.content}}
    </div>
  </article>
</section>

我对我所有的代码都进行了双重检查、三次检查，但我看不出我在哪里做错了。

Answer 1

看起来你的 getComments 是异步工作的，因为你正在传递一个回调函数，该函数将评论作为参数。

因此，即使您在该回调中更新评论，AngularJS 似乎也不会 "notice it"，对吗？

这是因为你必须明确地告诉 AngularJS 到运行一个新的摘要周期。

简而言之，只需将 $scope.$apply() 添加到回调的末尾即可：

getComments(20, articleID, 0, function(comments) {
    for(var i = 0; i < comments.length; i++) {
        $scope.addComment(comments[i]);
    }
    $scope.$apply();
});

要了解更多信息，请搜索 "AngularJS digest cycle"。简而言之，事情是：AngularJS 在所谓的摘要周期中更新所有内容。如果没有发生摘要循环，AngularJS 将不会 "notice" 更改。当事情运行同步时，AngularJS 自动运行摘要循环。但是对于很多异步的事情，AngularJS 无法自动计算出来，所以你必须明确地告诉 AngularJS 执行摘要循环。

Answer 2

您可以尝试执行类似以下代码的操作，另外请检查 this plunker link 是否包含一些虚拟操作的给定示例场景。

控制器：

$scope.comments = [];
    $scope.comment={};
    // This push works well, my view is updated
    $scope.comments.push({
        content: "Hello world !",
        date: "2 minutes ago",
        id: 29,
        author: {
            pseudo: "Sean"
        }
    });
    $scope.comments.push({
        content: "Hello world 2!",
        date: "5 minutes ago",
        id: 30,
        author: {
            pseudo: "Jack"
        }
    });
    // When I push with this function, my array is updated, but not the view
    $scope.addComment = function() {
        $scope.comments.push({
            content: $scope.comment.comment,
            id: $scope.comments.length+1,
            date: new Date(),
            author: {
                id: $scope.comments.length+1,
                pseudo: $scope.comment.comment
            }
        });
        console.log($scope.comments);
    };

模板：

<section id="commentsSection" class="bottom_apps" ng-controller="CommentsController">
      <input type="text" ng-model="comment.comment"/>
      <button type="button" ng-click="addComment()">Add Comment</button><br/>
      <article id = "{{comment.id}}" class="comment_container" ng-repeat="comment in comments">
        <div class="comment_header">
          <span class="comment_author">{{comment.author.pseudo}}</span>
          <span class="comment_date">{{comment.date}}</span>
        </div>
        <div class="comment_content">
          {{comment.content}}
        </div>
      </article>
    </section>

AngularJS, ng-repeat 不重复

AngularJS, ng-repeat doesn't repeat

javascript

frontend

angularjs

angularjs-ng-repeat