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);


        })

    }

}])
})();

我确定控制器在此html页面中处于活动状态，因为我可以毫无问题地提交内容，而且我的后端没有任何问题（我可以使用HTTP REST客户端请求）。此外，当我登录控制台this.messages时，我可以看到有正确的数据：

Image of my console

数据被记录3次，因为我刷新了很长时间的页面。我确保数据选项卡的每个对象都有一个_id属性。我真的没有看到问题，因为每个tuto似乎都做同样的事情。看起来像这样。消息在填写请求后立即松散其数据。

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

Answer 1

因此，您似乎将帖子称为路径中的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);
    })

}
}])})();

Answer 2

首先，您应该通过执行检查元素在浏览器中保留断点，并检查您在.then函数中获得的确切响应。

请告诉我们您获取的数据格式

 $http.post("/api/message/post/", newPost)
            .success(function(response){
            this.messages.push(newPost);
             // add break point here
             //new post -- what object you are getting here
        })

Answer 3

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

this.message位于$ http上下文中，而不是在控制器上下文中，因此在视图内或控制器中都不可用。

一个常见的解决方案（and best practice）是使用视图模型（vm）概念：

.controller("postController", ["$http", function($http){
    var vm = this;
    vm.messages = [];
    $http.get("/api/message/getAll/").then(function(response){
        vm.messages = response.data;
    });

编辑：

关键字this在整个控制器中都可用。在$http内，上下文发生了变化。使用this不再引用控制器，而是在$http.get.then

内调用函数

javascript变量（var vm）的范围比this“更大”，其引用在$http内不会更改。

因此，在controller.this内推送var vm可使整个控制器使用vm。

在HTML方面，使用controllerAs语法（您称为控制器post），您可以将控制器的实例（this）提供给$scope.post

如果您愿意，

post将成为控制器的this。

Answer 4

问题是您在$ http.get的解析中设置this.messages = response.data，其中“this”指的是该上下文而不是控制器上下文。为了解决此问题，请将此设置为var并将消息与该var关联，如下所示：

var vm = this;
$http.get("/api/message/getAll/").then(function(response) {
  vm.messages = response.data;
  console.log(this.messages);
});

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

4 个答案: