Question

我刚刚开始使用AngularJS，作为一个项目，我决定构建一个用于管理书签的简单应用程序。我希望能够维护书签列表并添加/删除项目。我正在使用Django与Django REST框架和Angular。

到目前为止，我已经编写了一个服务来从数据库中获取书签，我可以从控制器将它们打印到控制台，但ng-repeat似乎没有看到它们。

这是我的服务代码：

        RestClient client = new RestClient();
        client.BaseUrl = new Uri("https://api.mailgun.net/v3");
        RestRequest request = new RestRequest();

        client.Authenticator = new HttpBasicAuthenticator("api", "key-XXX");
        request.AddParameter("domain","yourdomain.com", ParameterType.UrlSegment);

        request.Resource = "{domain}/messages";
        //request.AddParameter("from", "Mailgun Sandbox <postmaster@sandboxc.mailgun.org>");
        request.AddParameter("from", "from@mail.com");
        request.AddParameter("to", to);
        request.AddParameter("subject", subject);
        request.AddParameter("text", "Text view of this email is not supported. Please view this email in HTML format. Thank you.");

        //This will help you to send email in HTML format
        request.AddParameter("html", body);

        request.Method = Method.POST;

        RestResponse stat = client.Execute(request) as RestResponse;

对于控制器：

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

这是HTML：

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

当我从控制器打印到控制台时，我可以看到一个promise对象但是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不符合承诺。所以，您可以采用两种方式：

BookmarkService.list（）。然后（函数（性反应）{ $ scope.bookmarks = responce.data; }）;
另一种方法是创建自己的repiter ^）

Ng-repeat doc

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

2 个答案: