AngularJS ng-repeat與控制器之間的通信

我剛開始使用AngularJS，並且作爲一個項目，我決定構建一個管理書籤的簡單應用程序。我希望能夠維護書籤列表並添加/刪除項目。我使用Django和Django REST框架和Angular。AngularJS ng-repeat與控制器之間的通信

到目前爲止，我已經編寫了一個服務來抓取數據庫中的書籤，並且可以將它們從我的控制器打印到控制檯，但是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>

當我打印從控制檯控制器我可以看到承諾對象，但ng-repeat不重複： image of promise object

我真的很感激，如果有人能幫我找到我的錯誤，並理解它爲什麼會發生。對於所有這些部件如何配合在一起，我仍然不是很滿意。

謝謝你的時間！

來源

2016-06-13 eilidh

有兩個問題，我有問題的代碼中看到。

第一種情況是，使用控制器作爲語法（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();

做你的控制器的這種

BookmarkService.list().then(function(result){ 
    this.bookmarks = result; 
});

最終版本應該是這個樣子

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

來源

2016-06-13 19:28:46

謝謝！這個答案解決了這個問題。 – eilidh

我以前曾經嘗試過。但是，還有另一個問題。當我使用「controller as」語法，即「listCtrl.bookmarks」時，書籤不會加載。他們只有沒有它。你知道爲什麼會這樣嗎？ – eilidh

哦，我以前沒有注意到。當使用控制器作爲語法時，您需要將屬性附加到控制器實例而不是'$ scope'。在這種情況下，看起來像'.controller（「ListController」， [「BookmarkService」，function（BookmarkService）{ this.bookmarks = BookmarkService.list（）; console.log（this.bookmarks）; }]] ）;'注意'this'而不是'$ scope' –

這很簡單。吳重複不符合承諾。所以，你可以去用兩種方式：

BookmarkService.list（），然後（函數（性反應）{$ = scope.bookmarks responce.data; }）;
另一種方法是創建自己的repiter ^）

Ng-repeat doc

來源

2016-06-13 19:25:37 Vitalii

AngularJS ng-repeat與控制器之間的通信

回答

相關問題