AngularJS ng-repeatとコントローラ間の通信

Question

AngularJSの使用を開始したばかりですが、プロジェクトとしてブックマークを管理するためのシンプルなアプリケーションを構築することにしました。私はブックマークのリストを維持し、アイテムを追加/削除できるようにしたい。私はDjango RESTフレームワークとAngularを使ってDjangoを使っています。

これまではデータベースからブックマークを取得するサービスを作成しましたが、コントローラからコンソールに印刷することはできますが、ng-repeatは表示されていないようです。

ここにサービスのための私のコードです：

.factory('BookmarkService', ["$http", function ($http) { 
    var api_url = "/api/bookmarks/"; 
    return { 
     list: function() { 
      return $http.get(api_url).then(function (response) { 
       return response.data 
      }) 
     } 
    } 
}]); 

とコントローラ用：

.controller("ListController", 
["$scope", "BookmarkService", function ($scope, BookmarkService) { 
    $scope.bookmarks = BookmarkService.list(); 
    console.log($scope.bookmarks); 
}]); 

そして、ここではHTMLです：

<div ng-controller="ListController as listCtrl"> 
    <md-card> 
     <md-card-content> 
      <h2>Bookmarks</h2> 
      <md-list> 
       <md-list-item ng-repeat="bookmark in listCtrl.bookmarks"> 
        <md-item-content> 
         <div class="md-tile-content"> 
          <p>{[{ bookmark.name }]} - {[{ bookmark.url }]}</p> // used interpolateProvider to allow "{[{" instead of "{{" 
         </div> 
         <md-divider ng-if="!$last"></md-divider> 
        </md-item-content> 
       </md-list-item> 
      </md-list> 
     </md-card-content> 
    </md-card> 
    </div> 

Iからコンソールに印刷するときコントローラ私は約束オブジェクトを見ることができますが、ng-repeatは繰り返されません： image of promise object

誰かが私の間違いを見つけて、なぜそれが起こっているのか理解するのを手伝ってくれたら本当に感謝しています。私はまだ、これらすべての部品がどのように適合しているかに全く満足していません。

ありがとうございました！

Answer 1

私は問題のコードを見る二つの問題がありますを作成することです。

最初に、コントローラーを構文（ng-controller="ListController as listCtrl"）として使用するには、コントローラー名を使用してアドレス指定する場合、プロパティーをコントローラー・インスタンスにバインドする必要があり、スコープにバインドする必要がありません。あなたのケースでは、

.controller("ListController", 
    ["BookmarkService", function (BookmarkService) { 
    this.bookmarks = BookmarkService.list(); 
    console.log(this.bookmarks); 
    }]); 

二つ目は、あなたの$scope.bookmarks財産への約束を割り当てているということです。リピータは、反復処理するオブジェクトの配列が必要です。あなたは本当に約束で解決された値を$scope.bookmarksに割り当てたいと思う。代わりに、この

$scope.bookmarks = BookmarkService.list(); 

の

は、コントローラの最終バージョンは、この

.controller("ListController", 
    ["BookmarkService", function (BookmarkService) { 
    this.bookmarks = BookmarkService.list(); 
    console.log(this.bookmarks); 
    }]); 

Answer 2

これは簡単です。 Ng-repeatは約束事で働いていません。 。だから、あなたは二つの方法で行くことができます。

1. BookmarkService.list（）、その後（機能（responce）{; $ scope.bookmarks = responce.data}）;

2. もう一つの方法は、自分のrepiter ^）

Ng-repeat doc