角度工厂里$ http里面的$ http

Question

我有一个角度工厂,使用get然后进行$ http调用.

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

我有一个很好的.get.then.值返回,因为我最初返回一个函数来返回工厂值,所以一切都会在更改时更新.

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

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

内部(从属)调用成功获取数据,但是当它更新工厂参数时,调用控制器仅拾取第一个.get.then.

接下来尝试:$ scope.$ watch.

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

如果我在其中放置$ scope参数,我会收到错误:

未知提供者:$ 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.

因此,在工厂注入范围总是会引发异常.

其次,尝试从控制器而不是工厂捕获回调

试试这样吧

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
    });

});