javascript - 即使数据存在，ng-repeat 也不会显示

Question

我在堆栈 MEAN 中创建一个基本网站，但我遇到了一些问题，即 ng-repeat 不会显示任何内容。奇怪的是，当我在另一个项目中做类似的事情时，它显示没有任何问题。

这是页面的 HTML:

    <!-- POST.HTML -->

<div class="row" ng-app ="myapp">
<div class = "col-xs-6 col-xs-offset-6 col-sm-6 col-sm-offset-6 col-md-6 col-md-offset-6" ng-controller="postController as post">

    <div class = "row">
        <strong> Username: </strong>
        <input type = "text" ng-model ="post.newPost.Author" class = "form-control" placeholder="Enter your username">
    </div>

    <div class = "row">
        <strong> Content </strong>
        <input type = "text" ng-model = "post.newPost.Content" class= "form-control" placeholder="Write a short text about your humor !">
    </div>

    <button ng-click = "post.Post()" > Post your message  ! </button>

<div> 
    <h4> Posts </h4>
        <li ng-repeat = "message in post.messages">

            <blockquote>
                <strong> Title : {{message._id}} </strong>
                  <!--  {{message.content}} -->
              <!--  <cite class="clearfix">—{{message.author}}</cite> -->
            </blockquote>
        </li>

</div>
</div>

和关联的脚本:

(function(){
angular.module("myapp")
.controller("postController", ["$http", function($http){
    $http.get("/api/message/getAll/").then(function(response){
        this.messages = response.data;
        console.log(this.messages);
    });

    this.Post = function(){
        console.log("Post() function called");
        var newPost = this.newPost;
        console.log(newPost);
        $http.post("/api/message/post/", newPost)
            .success(function(response){
            this.messages.push(newPost);


        })

    }

}])
})();

我确定 Controller 在此 html 页面中处于事件状态，因为我可以毫无问题地提交内容并且我的后端没有任何问题(我可以使用 HTTP REST 客户端进行请求)。此外，当我登录控制台 this.messages 时，我可以看到有正确的数据:

Image of my console

数据被记录了 3 次，因为我刷新了页面那么多次。我确保我的数据选项卡的每个对象都有一个 _id 属性。我真的没有看到问题，因为每个 tuto 似乎都在做同样的事情。看起来 this.messages 在被请求填充后会立即丢失其数据。

有没有人知道发生了什么事？

Answer 1

所以看起来您在路由中将 post 称为 controllerAs。您将值推送到错误的范围变量中。您应该使用专用的 $scope 以便更好地跟踪您的分配。以下应该有效。

(function(){
    angular.module("myapp").controller("postController", ["$scope","$http", function($scope, $http){
      $http.get("/api/message/getAll/").then(function(response){
      $scope.messages = response.data;
      console.log(this.messages);
    });

    this.Post = function(){
      console.log("Post() function called");
      var newPost = this.newPost;
      console.log(newPost);
      $http.post("/api/message/post/", newPost)
        .success(function(response){
        $scope.messages.push(newPost);
    })

}
}])})();