AngularJS, ng-repeat не повторяется - PullRequest
Новая
       8

AngularJS, ng-repeat не повторяется

0 голосов
/ 05 ноября 2018

Я новичок в 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>

Я дважды проверил, трижды проверил весь мой код, но не вижу, где допустил ошибку.

Ответы [ 2 ]

0 голосов
/ 05 ноября 2018

Вы можете попробовать сделать что-то вроде приведенного ниже кода. Также, пожалуйста, проверьте эту ссылку-плункер для вашего данного примера сценария с каким-то фиктивным действием.

Контроллер: 

$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>
0 голосов
/ 05 ноября 2018

Похоже, что ваш getComments работает асинхронно, поскольку вы передаете функцию обратного вызова, в которой в качестве параметра используются комментарии.

Поэтому, даже если вы обновляете свои комментарии внутри этого обратного вызова, AngularJS, похоже, не «замечает этого», верно?

Это потому, что вы должны явно указать 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 не «заметит» изменения. Когда все работает синхронно, AngularJS автоматически запускает циклы дайджеста. Но для многих асинхронных вещей AngularJS не может понять это автоматически, поэтому вы должны явно указать AngularJS для выполнения цикла дайджеста.

...