データがあってもng-repeatが表示されない

Question

スタックMEANの基本Webサイトを作成していますが、何も表示されない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> 

、スクリプト関連した：私は、コントローラは、Iとして、このHTMLページにアクティブであることを確信している

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


     }) 

    } 

}]) 
})(); 

私のバックエンドに問題はありません（HTTP RESTクライアントでリクエストできます）。私はコンソールthis.messagesにログインして はさらに、私は右のデータがある見ることができます：私は多くの時間、そのページをリフレッシュしているため

Image of my console

データは3回記録されます。私のデータタブのすべてのオブジェクトに_id属性があることを確認しました。 すべてのチュートが同じことをしているように私は本当に問題を見ません。 this.messagesは、要求が満ちてすぐにデータをただちに失うようです。

何が起こったのか考えている人はいますか？

Answer 1

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

this.messageは、$ HTTPコンテキストではなく、コントローラのコンテキストにあるので、あなたのビューの内側にも、あなたのコントローラでは使用できません。

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

EDIT：

共通の溶液（and best practice）ビュー・モデル（VM）の概念を使用することである

this

キーワードをコントローラ全体で利用可能です。 $httpの内部では、コンテキストが変更されます。 thisを使用するもうコントローラを参照するが、機能は$http.get.then

のJavaScript変数（var vm）thisよりも「大きい」範囲を有する内部と呼ばれ、その参照が内部$httpを変更しないしません。

var vmの中にcontroller.thisを入力すると、これはコントローラ全体でvmを使用して利用できるようになります。 HTML側で

は、 controllerAs構文であなたが $scope.post

postに使用可能なコントローラー（this）のインスタンスを作る（あなたのコントローラーpostと呼ばれる）したい場合は、コントローラのthisになります。

Answer 2

まず、inspect要素を実行してブラウザにブレークポイントを保存し、.then機能でどのような応答が得られているかを確認してください。

あなたがルートでcontrollerAsとしてポストを参照しているようなので、それが見えます私たちはあなたが

$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

になっているデータのどのような形式お知らせください。 不適切なスコープ変数で値をプッシュしています。専用$スコープを使用して、割り当てをよりうまく追跡できるようにしてください。次はうまくいくはずです。

(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 4

問題は、あなたがthis.messagesを設定していることである= $ http.getの決意でresponse.data「これは」コントローラコンテキストをそのコンテキストを参照していません。これを回避するには、これにvarを設定して、次のようにメッセージをそのvarに関連付けます。

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