Question

我使用工厂使用$http和controllerAs功能检索数据以注入我的视图。如果不使用$scope，我将$http响应数据返回到控制器中的属性时出现问题。

我的工厂

myApp.factory('Topics', function ($http, $q) {
    var service = {},
        _error = 'Oh no! Something went wrong. Please check back later.';


    service.getTopics = function () {
        var deferred = $q.defer();

        $http.get(_url).success(function (resp) {
            deferred.resolve(resp);
        }).error (function () {
            deferred.reject(_error);
        });
        return deferred.promise;
    }

    return service;
});

我的控制器

 myApp.controller('TopicsCtrl', function (Topics) {
    this.topics = (function () {
        return Topics.getTopics().then(function (resp) {
            console.log(resp);
            return resp;
        });
    })();
}

我的观点

<h1>{{ top.topics }}</h1>

就像我说我在配置为controllerAs的路线中使用top一样。控制器中的console.log记录了我正在查找的内容，但topics的值在注入视图时为空。离开我{}。

P.S。根据我的理解$http是$q的抽象，这让我想知道在这个例子中使用$q是否是不必要的。

Answer 1

以下内容应该有效：

  myApp.controller('TopicsCtrl', function (Topics) {
    Topics.getTopics().then(function (resp) {
      this.topics = resp;
    }.bind(this));
  });

然后通过top.topics在您的视图中访问它。

编辑：此外，您在服务中不需要$ q也是正确的。您可以直接返回$ http.get：

service.getTopics = function() {
    return $http.get(_url);
};

Answer 2

你所做的是用promise来初始化top.topics。但是角度观点对承诺无能为力。他们需要的是实际数据，当承诺得到解决时可以访问。所以你需要的是：

// oh the joys of this...
var that = this;

Topics.getTopics().then(function (resp) {
    console.log(resp);
    that.topics = resp;
});

请注意，您可以在服务中使用保证链：

    return $http.get(_url).then(function (resp) {
        return resp.data;
    }).catch(function() {
        return $q.reject(_error);
    });

AngularJS：返回对控制器属性的.then（）响应

2 个答案: