javascript - Angular 工厂中的 $http 内部的 $http

Question

我有一个 Angular 工厂，它使用 get 然后进行 $http 调用。

 .factory('DataModel', function($http) {

我有一个 .get.then，效果很好。值回来了，因为我最初返回一个函数来返回工厂值，所以当它改变时一切都会更新。

现在我必须根据第一次返回的数据进行依赖调用。

首先尝试:$http.get.then 在外面的$http.get.then.

内部(依赖)调用成功获取数据，但是当它更新工厂参数时，只有第一个 .get.then 被调用 Controller 获取。

下一次尝试:$scope.$watch.

angular.module('starter.services', [])
 .factory('DataModel', function($scope, $http) {

如果我在其中放置一个 $scope 参数，我会得到一个错误:

Unknown provider: $scopeProvider <- $scope <- DataModel

所以我似乎无法使用 $scope.$watch 方法。

第三次尝试:回调？

我担心如果我使用回调方法我会取回数据，但它不会像我的嵌套 get.then 那样更新。没有更新。

这是我的完整工厂:

angular.module('starter.services', [])

.factory('DataModel', function($http) {

    var days = {};
    var todaysFlavorIndex = 32;
    var todaysFlavorName = [32, 'Loading ...', "vanilla_chocolate_chip.jpg"];
    var daysLeftCalendar = [];

    var flavors = [];

    // calendar objects
    $http.get("https://jsonblob.com/api/5544b8667856ef9baaac1")
        .then(function(response) {
            var result = response.data;
            days = result.Days;

            var dateObj = new Date();
            var day = dateObj.getDate();

            var endOfMonthDate = new Date(new Date().getFullYear(), dateObj.getMonth(), 0).getDate();
            for (var di = day; di <= endOfMonthDate; di++) {
                var flavor = days[di - 1];
                daysLeftCalendar.push(flavor[1]);
            }

            var todaysFlavorIndex = -1;
            // $scope.$watch('todaysFlavorIndex', function() {
            //    // Http request goes here
            //    alert('updating !');
            // });
            for (var i = 0; i < days.length; i++) {
                if ((days[i])[0] == day) {
                    todaysFlavorIndex = (days[i])[1];
                }
            }

            // flavors
            $http.get("https://jsonblob.com/api/55450c5658d3aef9baac1a")
                .then(function(resp) {
                    flavors = resp.data.flavors;
                    todaysFlavorName = flavors[todaysFlavorIndex];
                });
        }); // end then

    return {
        getDays: function() {
            return days;
        },
        getMonth: function() {
            return days;
        },
        getFlavors: function() {
            return flavors;
        },
        getTodaysFlavorIndex: function() {
            return todaysFlavorIndex;
        },
        getTodaysFlavorName: function() {
            return todaysFlavorName; // flavors[todaysFlavorIndex];
        },
        today: function() {
            var dateObj = new Date();
            var day = dateObj.getUTCDate();
            return todaysFlavorIndex;
        },
        remainingFlavorIndexes: function() {
            return daysLeftCalendar
        }
    };
})

Answer 1

首先，服务没有$scope。

所以在工厂中注入(inject)作用域总是会抛出异常。

其次，尝试从 Controller 而不是工厂捕获回调

这样试试

angular.module('starter.services', [])

.factory('DataModel', function($http) {

    return {

        myFunction: function() {
            return $http.get("https://jsonblob.com/api/5544b8667856ef9baaac1");
        }

    }

})

.controller("myCtrl", function($scope, DataModel) {

    DataModel.myFunction().then(function(result) {
        // success 
        // put your code here
    }, function(e) {
        // error
    });

})

第三，如果你想要内部$http，你可以使用$q

这样试试

angular.module('starter.services', [])

.factory('DataModel', function($http) {

    return {

        myFunction: function() {
            return $http.get("https://jsonblob.com/api/5544b8667856ef9baaac1");
        },
        myFunction2: function() {
            return $http.get("https://jsonblob.com/api/55450c5658d3aef9baac1a");
        }

    }

})

.controller("myCtrl", function($scope, DataModel, $q) {

    $q.all([
        DataModel.myFunction(),
        DataModel.myFunction2()
    ]).then(function(data) {
        console.log(data[0]); // data from myFunction
        console.log(data[1]); // data from myFunction2
    });

});