Question

我在使用工厂/服务时遇到了麻烦。我已经为我的所有AJAX调用创建了一个AjaxRequests工厂。我的工厂代码是

.factory('AjaxRequests', ['$http', function ($http) {
                return {
                    getCampaignsData: function () {
                        var campaigns
                        return $http.get(url).then(function (response) {
                            campaigns = response.data;
                            return campaigns;
                        });

                    }
                }
            }])

我已经创建了另一个服务，我正在注入这个工厂。我的服务代码

.service('CampaignsService', ['$rootScope', 'AjaxRequests', function ($rootScope, AjaxRequests) {
     this.init = function () {
     this.camps;
     AjaxRequests.getCampaignsData().then(function (response) {
       this.camps = response.campaigns;
       console.log(this.camps); // It is showing data
     })
     console.log(this.camps); // But it is not working :(
    };
   this.init();

}])

在我的控制器中

.controller('AdvanceSettingsController', ['$scope', 'CampaignsService', function ($scope, CampaignsService) {
                $scope.CampaignsService = CampaignsService;
            }
        ])

我已经阅读了这个article来学习承诺，但它在这里不起作用。我可以直接在控制器中实现它，它一直工作正常。但它认为控制器厚度是一个糟糕的编码标准。但是当我使用服务和工厂时，我卡住了。 我的问题是为什么我没有在我的整个服务中使用ajax数据？我需要在我的视图模板和我的整个休息脚本中使用CampaignsService.camps但每次我都得到undefined。这里发生了什么？我以前问过同样的问题但是没有取得任何成功。 有人请帮助我了解承诺以及为什么如果我的工作相同我会收到此类错误？这类问题已经被问到before，但它在控制器中工作。可能是因为我在服务中使用它而被卡住了。

提前非常感谢。

Answer 1

这不是一个错误或一些棘手的功能。就像在任何其他AJAX实现中一样，您只能访问AngularJS的$http success方法中的响应数据。这是因为异步JavaScript和XML的异步特性。

你所拥有的是工作。

.controller('AdvanceSettingsController', ['$scope', 'AjaxRequests', function ($scope, AjaxRequests) {
        $scope.camps = [];
        AjaxRequests.getCampaignsData().then(function(data) {
             $scope.camps = data;
        });
    }
])

然后绑定camps：

<div ng-repeat="camp in camps>{{camp.name}}</div>

您的实施中的错误不是在服务中对相关内容进行分组，而是为所有内容编写大型AjaxRequests服务。你应该有CampaignsService getData方法并将其注入你的控制器。

为什么这样有效？因为$http为您执行$scope.$apply，因此在加载数据（then）后触发摘要周期并更新HTML。因此，then回调ng-repeat与[]一起运行，而在之后，它会再次运行但是来自回复的数据，因为您正在设置{{1} }。

$scope.camps = data;不起作用的原因是function variable scoping。

<div ng-repeat="camp in CampaignsService.camps>{{camp.name}}</div>回调中的this引用与其外部的then引用不同。

这将起作用并使用常见的this技巧：

var self = this

意外的承诺行为

1 个答案: