Question

我尝试过这样的事情：

var vehicle_info = angular.module('psngr.vehicle_info', []).factory('vehicle_info', ['$rootScope', '$timeout', '$q', vehicle_info]);
var name = vehicle_info.getNameOfVclass($rootScope.data.user.vehicles[i].vclass.id);

但我明白了：

vehicle_info.getNameOfVclass is not a function
at dashboard.js?v=@@TIMESTAMP:288
at angular.js:9369
at angular.js:13189
at l.$eval (angular.js:14401)
at l.$digest (angular.js:14217)
at l.$apply (angular.js:14506)
at l (angular.js:9659)
at S (angular.js:9849)
at XMLHttpRequest.D.onload (angular.js:9790)

为什么？

在我这样做之前，在app.js文件中：

 angular.module('psngr.vehicle_info', []).factory('vehicle_info', ['$rootScope', '$timeout', '$q', vehicle_info]);
 var app = angular.module('app', ['ngRoute', 'ngAnimate', 'route-segment', 'view-segment', 'ngCookies', 'ngImgCrop', 'ngSanitize', 'psngr.payment', 'psngr.storage', 'psngr.unit', 'psngr.vehicle_info']);

其中：

 app = app.run(function($rootScope, $location, $timeout, $http, $window, storage, unit) {
    $rootScope.unit = unit;
}

但我不希望它拥有rootScope，并且是全局的，我只想在我使用它的html中加载脚本文件。所以我想在该html的js文件中加载模块。可能吗？

编辑：

包含该服务的vehicle_info.js文件如下所示：

 var vehicle_info = function($rootScope, $timeout, $q) {
function getNameOfVclass(vclass) {
    switch(vclass) {
        case 1:
            return i18n.t('psngr.profile.vehicle.car.midsize');
        case 2:
            return i18n.t('psngr.profile.vehicle.car.large');
        case 3:
            return i18n.t('psngr.profile.vehicle.car.compact');
        case 4:
            return i18n.t('psngr.profile.vehicle.car.scooter');
        case 5:
            return i18n.t('psngr.profile.vehicle.car.motorcycle');
        case 6:
            return i18n.t('psngr.profile.vehicle.car.suv');
        case 7:
            return i18n.t('psngr.profile.vehicle.car.van');
        case 8:
            return i18n.t('psngr.profile.vehicle.car.pickup');
        case 9:
            return i18n.t('psngr.profile.vehicle.car.truck');
        case 10:
            return i18n.t('psngr.profile.vehicle.car.bicycle');
        default:
            return i18n.t('psngr.profile.vehicle.car.midsize');
    }
}

//Exposed methods
return {
    /*  get name of vclass */
    getNameOfVclass: function(vclass) {
        return getNameOfVclass(vclass);
    },
};
};

Answer 1

当然可以，但在初始化之前你不能使用服务。

var vehicle_info = angular.module('psngr.vehicle_info', []).factory('vehicle_info', ['$rootScope', '$timeout', '$q', vehicle_info]);
var name = vehicle_info.getNameOfVclass($rootScope.data.user.vehicles[i].vclass.id);

而是做这样的事情。首先定义您的服务

var vehicle_info = angular.module('psngr.vehicle_info', []).factory('vehicle_info', ['$rootScope', '$timeout', '$q']);

现在将它包含在控制器中。阅读Factory Recipe此处

Answer 2

为什么会收到错误： vehicle_info.getNameOfVclass is not a function

第一行并没有做你认为它做的事情。看起来您正在尝试将vehicle_info工厂的实例分配给名为vehicle_info的变量：

var vehicle_info = angular.module('psngr.vehicle_info', []).factory('vehicle_info', ['$rootScope', '$timeout', '$q', vehicle_info]);

这里实际发生的是您将psngr.vehicle_info模块分配给vehicle_info变量。这是因为对模块的.factory()函数的调用并不返回工厂的实例，它返回启用链接的模块。因此，在声明第一个变量之后，错误在第二行变得明显：

var name = vehicle_info.getNameOfVclass($rootScope.data.user.vehicles[i].vclass.id);

在这里，您正在寻找模块上名为getNameOfVclass的函数，当然它不存在，或者正如Angular所说： getNameOfVclass不是函数

使用工厂的实例

您必须将其注入您希望使用它的另一个角度组件（通常是控制器）。所以在你的情况下，你的代码可能变成这样的东西（我已经更改了名称，因为我更喜欢命名它们）：

var app = angular.module('myApp', []);

app.controller('appController', function($scope, vehicleInfoService) {
    $scope.name = vehicleInfoService.getNameOfVclass();
});

app.factory('vehicleInfoService', function ($rootScope, $timeout, $q){
    return {
        getNameOfVclass: function(){
            return "ABC";
        }
    }
});

然后作为一个基本的例子，在index.html中你可以有这样的东西：

<div ng-controller="appController">
    <p>The name of the v class is: {{ name }}</p>
</div>

<强> Example Plunk Here

Angular JS我可以在我需要它的js上加载一个服务，而不是在app.js中吗？

2 个答案: