工厂服务始终未定义

时间:2017-03-10 15:01:37

标签: angularjs dependency-injection

我花了几个小时试图调试这个没有真正的突破。我的console.logs正确输出了加载顺序 - app
- 工厂
- 控制器
我正在注释我的依赖关系(即使我现在没有缩小)。

我在这里有什么明显的错误吗?

错误
enter image description here

app

(function () {
'use strict';
console.log("running app");
var app = angular.module('InventoryProductApp', []).config(function ($logProvider) {
    $logProvider.debugEnabled(true);
});
angular.element(document).ready(function () {
    var app = document.getElementById('InventoryProductApp');
    angular.bootstrap(angular.element(app), ['InventoryProductApp']);
});
})();  

控制器

(function () {
'use strict';
angular.module('InventoryProductApp').controller("LocationsController", ['$scope', '$log', 'LocationsFactory'
, function ($scope, $http, $log, LocationsFactory) {
    console.log("running controller");
    $scope.locations = null;
    $scope.loading = false;

    //private methods -------------------------------------------------------------------------------------------------------------------------------------------------------------

    var fetchLocationData = function (inventoryId) {
        $scope.loading = true;
        console.log(LocationsFactory);
        var promise = LocationsFactory.getLocationData(inventoryId);

        promise.then(function (data) {
            $scope.loading = false;

            if (data.success) {
                $scope.locations = data.locations;
            }
            else
            {
                $log.error('There was an error getting location data');
            }

        }, function (data) {
            $scope.loading = false;
            $log.error('There was an error getting location data');
        });
    }

    //end private methods ---------------------------------------------------------------------------------------------------------------------------------------------------------


    //public methods --------------------------------------------------------------------------------------------------------------------------------------------------------------

    var init = function (inventoryId) {
        console.log('inventoryId', inventoryId);
        fetchLocationData(inventoryId);
    }
    //end public methods ----------------------------------------------------------------------------------------------------------------------------------------------------------

    init(inventoryId); // inventoryId is found in the partialView _inventoryLocationDistribution
}]);
})();  

工厂

(function () {
'use strict';

angular.module('InventoryProductApp').factory('LocationsFactory', ['$http', '$q', '$log', function ($http, $q, $log) {
    console.log("running factory");
    return {
        getLocationData: function (inventoryId) {
            var def = $q.defer();

            $http.get('/butthead', {
                params: {
                    inventoryId: inventoryId
                }
            }).then(function (response) {
                def.resolve({
                    success: true,
                    locations: data.locations
                });
            }, function (response) {
                $log.error('failed to fetch data', response);
                def.resolve({
                    success: false,
                    redirect: response.redirect
                });
            });

            return def.promise;
        }
    }
}]);
})();  

脚本加载顺序

<script src="~/theme/modern/assets/global/plugins/angularjs/angular.min.js"></script>
<script src="~/App/Inventory/Product/ProductApp.js"></script>
<script src="~/App/Inventory/Product/LocationsFactory.js"></script>
<script src="~/App/Inventory/Product/LocationsController.js"></script>

1 个答案:

答案 0 :(得分:2)

在您的控制器中:

angular.module('InventoryProductApp').controller("LocationsController",    
    ['$scope', '$log', 'LocationsFactory', function ($scope, $http, $log, LocationsFactory) {

您的依赖注入中缺少'$http',这意味着LocationsFactory参数根本没有填充。