AngularJS Связь между ng-repeat и контроллером

Question

Я только начал использовать AngularJS, и в качестве проекта я решил создать простое приложение для управления закладками. Я хочу иметь возможность поддерживать список закладок и добавлять/удалять элементы. Я использую Django с Django REST framework и Angular.

До сих пор я написал службу для захвата закладок из базы данных, и я могу распечатать их на консоли с моего контроллера, но 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

Я был бы очень признателен, если бы кто-то помог мне найти мою ошибку и понять, почему это происходит. Мне все еще не совсем нравится, как все эти части подходят друг к другу.

Спасибо за ваше время!

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

ли это

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

Окончательный вариант контроллера должен выглядеть как этот

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

Answer 2

Это просто. Ng-repeat не работает с обещаниями. Таким образом, вы можете пойти двумя путями:.

1. BookmarkService.list() затем (функция (Быстродействие) {$ scope.bookmarks = responce.data; });

2. Другой способ заключается в создании собственного repiter ^)

Ng-repeat doc