AngularJS - 工厂是一个空物体

Question

我是AngularJS新手 - 我找不到为什么我在$scope.clickMe函数中得到错误mainDataService.refreshStatus is not a function。除了初始化之外，我看到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(){}())