Question

我是AngularJS的新手 - 我无法弄清楚为什么我在mainDataService.refreshStatus is not a function函数中收到错误$scope.clickMe。我看到mainDataService变量除了初始化之外是一个空对象。我在这里做错了什么？

    var mainDataService = {};

    var firstModule = angular.module('myModule', ['ngRoute', 'ngAnimate']);

    (function () {
        var mainDataServiceInjectParams = ['$http', '$q'];

        var mainFactory = function ($http, $q) {
            mainDataService.refreshStatus = function (id) {
                return $http.get('/api/values/' + id).then(function (results) {
                    return results.data;
                });
            };

            return mainDataService;
        };


        mainFactory.$inject = mainDataServiceInjectParams;
        firstModule = firstModule.factory('mainService', mainFactory);
    }());

    firstModule.controller('myCtrl', function ($scope, $http) {
        $scope.TST = '1';

        $scope.clickMe = function (id) {
            mainDataService.refreshStatus(id).then(function (results) {
                $scope.TST = results;
            });
        }
    });

Answer 1

您需要使用依赖注入机制来加载您自己的服务。

将mainDataService声明放在本地范围内，并将mainService注入myCtrl：

var firstModule = angular.module('myModule', ['ngRoute', 'ngAnimate']);

(function () {
    var mainDataServiceInjectParams = ['$http', '$q'];

    var mainFactory = function ($http, $q) {
        var mainDataService = {};
        mainDataService.refreshStatus = function (id) {
            return $http.get('/api/values/' + id).then(function (results) {
                return results.data;
            });
        };

        return mainDataService;
    };


    mainFactory.$inject = mainDataServiceInjectParams;
    firstModule = firstModule.factory('mainService', mainFactory);
}());

firstModule.controller('myCtrl', function ($scope, $http, mainService) {
    $scope.TST = '1';

    $scope.clickMe = function (id) {
        mainService.refreshStatus(id).then(function (results) {
            $scope.TST = results;
        });
    }
});

更好的是，您应该明确地将依赖项分配给控制器，以便您的代码在minifcation之后仍然有效（正如您已经为服务所做的那样）：

firstModule.controller('myCtrl', myCtrl);

myCtrl.$inject = ['$scope', '$http', 'mainService'];
function myCtrl($scope, $http, mainService) {
    $scope.TST = '1';

    $scope.clickMe = function (id) {
        mainService.refreshStatus(id).then(function (results) {
            $scope.TST = results;
        });
    }
});

如您所见，如果您使用正常的函数定义，您可以使用Javascript的函数提升并在最后编写函数，同时将相关代码放在顶部。这与您的服务示例相反。

Answer 2

将mainService提供给控制器

firstModule.controller('myCtrl', function ($scope, $http, mainService) {

然后在函数

中使用它

mainService.refreshStatus

Answer 3

我认为你没有立即调用函数调用，所以mainDataService仍然引用你在第一行设置的对象

(function(){})()

而不是

(function(){}())

AngularJS - 工厂是一个空对象

3 个答案: