带有 $http 的 Angular 工厂 [重复]答案

【问题标题】：Angular factory with $http [duplicate]带有 $http 的 Angular 工厂 [重复]
【发布时间】：2015-08-26 16:38:32
【问题描述】：

我正在编写一个调用 JSON 提要并返回结果的工厂。

这里是使用 $http 的工厂

nearestLocationApp.factory("allTheLocationsFactory", function($http){
    var locations = "Not sure why it don't work";
    $http.get('/json/locations/').then(function(res){
        locations = res.data;
    });
    return locations;
});

当我将它包含在控制器中时，我得到了位置变量的第一个版本。就像这里有2个不同的范围。我很确定这是我的问题，但我不知道为什么。

这是我调用并打印出控制器的 console.log。

nearestLocationApp.controller("getTheLocation", function($scope, allTheLocationsFactory){

    $scope.locationResponse = "Find your location";
    $scope.locations = allTheLocationsFactory;
    console.log($scope.locations);

});

我需要知道的是为什么我的工厂有多个示波器以及如何修复它。

如果有人感兴趣，JSON 数据如下所示。

[
{
    "Name":"#########",
    "ID":#########,
    "address1":"#########",
    "address2":"#########",
    "city":"#########",
    "state":"#########",
    "zip":"#########",
    "phoneNumber":"#########",
    "thumbnail":[
        "#########",
        #########,
        #########,
        #########
    ],
    "permalink":"#########",
    "weekdayHours":"#########",
    "saturdayHours":"#########",
    "sundayHours":"#########",
    "coords":{
        "longitude":"#########",
        "latitude":"#########"
        },
    "options":{"animation":#########}
}, ......

【问题讨论】：

标签： json angularjs rest angularjs-scope

【解决方案1】：

您正在处理异步调用，它为您异步获取数据。在此您的工厂应该返回 $http 承诺，您可以在控制器中获取该承诺并将 .then 函数放入，当工厂 $http 从它成功回调返回 locations 时，它将被调用。

工厂

nearestLocationApp.factory("allTheLocationsFactory", function($http){
    return $http.get('/json/locations/').then(function(res){
        return res.data;
    });
});

控制器

nearestLocationApp.controller("getTheLocation", function($scope, allTheLocationsFactory){

    allTheLocationsFactory.then(function(data){
        $scope.locations = data;
        console.log($scope.locations);
    })

});

【讨论】：

【解决方案2】：

理想情况下，您的工厂实例应该返回一个可以在控制器内或理想情况下在路由器 resolve 选项内解析的 Promise 实例。

nearestLocationApp.factory("allTheLocationsFactory", function($http){
    var jsonURL      = '/json/locations/',
        getLocations = function(){
            return $http.get(jsonURL).then(function(result){
                return result.data;
            });
        };
    return {
        getLocations: getLocations
    };
});

然后在您的应用程序配置或路由器中类似；

var nearestLocationsApp = angular.module('myApp', [
    'ngRoute'
])
    .config(function($routeProvider) {
        $routeProvider.when("/", {
             templateUrl: "templates/someTemplate.html",
             controller:'SomeCtrl',
             controllerAs: 'ctrl',
             resolve: {
                 locations: function(allTheLocationsFactory) {
                     return allTheLocationsFactory.getLocations();
                 }
             }
         });
      });

在你的控制器中类似于;

nearestLocationApp.controller('someController', [
    '$scope',
    'allTheLocationsFactory',
    'locations',
    function($scope, allTheLocationsFactory, locations) {
         $scope.locations = locations;
    }
]);

或者不使用路由器中的resolve 选项；

nearestLocationApp.controller('someController', [
    '$scope',
    'allTheLocationsFactory',
    function($scope, allTheLocationsFactory) {
        allTheLocationsFactory.getLocations().then(function(res) {
            $scope.locations = res;
        });
    }
]);

我个人更喜欢前一种选择，而不是依赖控制器中的承诺。您可以查看其他一些有用的角度提示here

希望对你有所帮助！

【讨论】：