javascript - 从 AngularJS API 服务返回一个值给 Controller

标签 javascript angularjs api service factory

如果我有这样的服务:

app.factory('User', function($http, User) {
    var User = function(data) {
        angular.extend(this, data);
    };
    User.prototype.create = function() {
        var user = this;

        return $http.post(api, user.getProperties()).success(function(response) {
            user.uid = response.data.uid;
        }).error(function(response) {

        });
    };

    User.get = function(id) {
        return $http.get(url).success(function(response) {
            return new User(response.data);
        });
    };

    return User;
});

我如何在 Controller 中获取在 get() 函数中创建的 User

目前我拥有的是:

app.controller('UserCtrl', function($scope, User) {
    $scope.user = null;

    User.get($routeParams.rid).success(function(u) {
        $scope.user = new User(u.data);
    });
});

问题是 UserCtrl 正在获取 api 响应,而不是从工厂中的 success() 返回的值。我更愿意在工厂中创建新用户,而不是将 api 响应传递给 Controller ​​。

最佳答案

编辑:2015 年 5 月 5 日

我了解了 deferred anti-pattern在尝试回答这个问题时 question .

所以我们可以避免使用$q.defer(),使用下面的代码来达到同样的效果。

服务

User.get = function(id) {
    return $http.get(url).then(function(response) {
        return new User(response.data);
    });
};

Controller

User.get($routeParams.rid).then(function(u) {
    $scope.user = u;
});

原答案如下:

我认为您正在寻找的是 $q 服务,它允许您对来自异步 $http 服务的响应进行一些后处理,然后将其返回作为 promise 给 Controller 。在此处查看文档 https://docs.angularjs.org/api/ng/service/$q

因此,在您的工厂中注入(inject) $q 服务并更改您的 User.get 函数,如下所示。

User.get = function(id) {
    var deferred = $q.defer();

    $http.get(url).success(function(response) {
        deferred.resolve(new User(response.data));
    }).error(function(error) {
        deferred.reject(error);
    });

    return deferred.promise;
};

然后在你的 Controller 中你可以做

User.get($routeParams.rid).then(function(u) {
    $scope.user = u;
}, function(error) {
    //log error
});

关于javascript - 从 AngularJS API 服务返回一个值给 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29871520/

相关文章:

Javascript:跨浏览器的无服务器文件上传和下载

javascript - 如何使用 Grunt 将多个 JSON 文件加载到 Jade 模板中?

javascript - 有没有办法使用智能表选择单个单元格?

javascript - 读取 localStorage 数据?

angularjs - 如何为谷歌机器人动态设置 Angular 单页应用程序的标题和描述?

javascript - NgRoute 未加载(modulerr 错误)

api - 将 CURL 转换为 postman

python - 如何以编程方式报告类的 API?

javascript - 如果单击按钮,则将输入添加到表单

javascript - 如何使用jquery在多组列表框中选择一个项目