AngularJS ng-repeat 和控制器之间的通信

Question

我刚开始使用 AngularJS，作为一个项目，我决定构建一个简单的应用程序来管理书签。我希望能够维护书签列表和 add/remove 项。我将 Django 与 Django REST 框架一起使用，并且 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>

当我从控制器打印到控制台时，我可以看到一个 promise 对象，但 ng-repeat 没有重复： image of promise object

如果有人能帮我找出我的错误并理解为什么会这样，我将不胜感激。我对所有这些部分如何组合在一起仍然不太满意。

感谢您的宝贵时间！

Answer 1

这很简单。 Ng-repeat 没有使用 promises。因此，您可以采用两种方式：

BookmarkService.list().then(函数(响应){ $scope.bookmarks = responce.data; });
另一种方法是创建自己的repiter ^)

Ng-repeat doc

Answer 2

我发现相关代码存在两个问题。

首先是使用控制器作为语法 (ng-controller="ListController as listCtrl") 需要将属性绑定到控制器实例而不是范围，如果您使用控制器名称寻址它们。在你的情况下，

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

第二个是您正在为您的 $scope.bookmarks 属性分配承诺。转发器期望迭代一个对象数组。您真的想将 promise 解析的值分配给 $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);
  }]);

AngularJS ng-repeat 和控制器之间的通信

AngularJS Communication between ng-repeat and controller

angularjs

angularjs-ng-repeat

angularjs-controller