Question

我正在写我认为一个相当简单的工厂（作为教程的一部分）但我无法在控制器中加载它。我关注的教程使用$ scope，我用'controller as'重写所有内容。

这是我的工厂功能：

(function(){
    var customersFactory = function(){
        console.log('running');
        var customers=[
            {
                id: 1, 
                joined: '2000-12-02', 
                name:'John', 
                city:'Chandler', 
                orderTotal: 9.9956,
                orders: [
                    {
                        id: 1,
                        product: 'Shoes',
                        total: 9.9956
                    }
                ]
            }, 
            {
                id: 2, 
                joined: '1965-01-25',
                name:'Zed', 
                city:'Las Vegas', 
                orderTotal: 19.99,
                orders: [
                    {
                        id: 2,
                        product: 'Baseball',
                        total: 9.995
                    },
                    {
                        id: 3,
                        product: 'Bat',
                        total: 9.995
                    }
                ]
            },
            {
                id: 3, 
                joined: '1944-06-15',
                name:'Tina', 
                city:'New York', 
                orderTotal:44.99,
                orders: [
                    {
                        id: 4,
                        product: 'Headphones',
                        total: 44.99
                    }
                ]
            }, 
            {
                id: 4, 
                joined: '1995-03-28',
                name:'Dave', 
                city:'Seattle', 
                orderTotal:101.50,
                orders: [
                    {
                        id: 5,
                        product: 'Kindle',
                        total: 101.50
                    }
                ]
            }
        ];
        var factory = {};
        console.log(customers);
        factory.getCustomers = function(){
            return customers
        };
        return factory;
    };   

    angular.module('customersApp')
        .factory('customersFactory', customersFactory);
}());

这是我的第一个控制器：

(function(){
    var CustomersController = function(customersFactory) {
        var vm = this;
        vm.sortBy = 'name';
        vm.reverse = false;
        vm.customers = [];  //placeholder

        init = function(){
            vm.customers=customersFactory.getCustomers();
        };

        init();

        vm.doSort = function(propName) {
           vm.sortBy = propName;
           vm.reverse = !vm.reverse;
        };
    };

    CustomersController.$inject = ['$routeParams', 'customersFactory'];

    angular.module('customersApp')
    .controller('CustomersController', CustomersController);
}());

此控制器附加到使用ng-repeat制作客户数据表的视图。这在重构工厂之前工作正常。

我启动时工厂功能正在运行，但我的控制器似乎无法识别它。我收到错误：

angular.js：13920 TypeError：customersFactory.getCustomers不是函数在init（http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/app/controllers/customersController.js:12:43）在新的CustomersController（http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/app/controllers/customersController.js:15:9）在Object.instantiate（https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:4733:14） $ controller（https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:10369:28） at Object.link（http://127.0.0.1:65178/Module3Code/Code/End/UsingControllersFactories/scripts/angular-route.js:1001:26）在https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:1247:18 at invokeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:9934:9）在nodeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:9335:11）在compositeLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:8620:13） at publicLinkFn（https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js:8500:30）（匿名函数）@ angular.js：13920（匿名函数）@ angular.js： 10467invokeLinkFn @ angular.js:9936nodeLinkFn @ angular.js:9335compositeLinkFn @ angular.js:8620publicLinkFn @angular.js:8500lazyCompilation @ angular.js:8844boundTranscludeFn @ angular.js:8637controllersBoundTransclude @ angular.js:9385update @ angular-route.js： 959 $ broadcast @ angular.js：18005（匿名函数）@ angular-route.js：643processQueue @ angular.js：16383（匿名函数）@ angular.js：16399 $ eval @ angular.js：17682 $ digest @ angular。 js：17495 $ apply @ angular.js：17790done @ angular.js：11831completeRequest @ angular.js：12033requestLoaded @ angular.js：11966 http://127.0.0.1:65178/favicon.ico无法加载资源：服务器响应状态为404（未找到）

我做错了什么？

Answer 1

您正在注入两项服务

CustomersController.$inject = ['$routeParams', 'customersFactory'];

但只有一个论点。

var CustomersController = function(customersFactory) {

只需将$ routeParams添加到控制器：

var CustomersController = function($routeParams, customersFactory) {

为什么使用匿名函数？最好像这样写：

angular.module('customersApp').controller('CustomersController', CustomersController);

CustomersController.$inject = ['$routeParams', 'customersFactory'];
function CustomersController($routeParams, customersFactory) {
}

它更清洁了。

工厂未加载到控制器

1 个答案: