Controller function defined but not catched by angularjs

Question

I have a plunk @ http://plnkr.co/edit/VnFmKqnFh0vOFARvIgVB?p=preview

(function () {
    'use strict';

    angular
        .module('app')
        .controller('MainController', MainController);
 MainController.$inject = ['DataService', '$rootScope', '$scope', 'timeFilterValues', '$localStorage'];
    function MainController(DataService, $rootScope, $scope, timeFilterValues, $localStorage) {

        var vm = this;

        vm.currentFilter = {
            selections: $localStorage.getObject('currentSelections') || [],
            vendors: $localStorage.getObject('currentVendors') || [],
            segments: $localStorage.getObject('currentSegments') || [],
            units: $localStorage.getObject('currentUnits') || [],
            categories: $localStorage.getObject('currentCategories') || [],
            classes: $localStorage.getObject('currentClasses') || [],
            years: $localStorage.getObject('currentYears') || {},
            buyers: $localStorage.getObject('currentBuyers') || [],
            evp: $localStorage.getObject('currentEvp') || [],
            quarters: $localStorage.getObject('currentQuarters') || [],
            months: $localStorage.getObject('currentMonths') || []
        };

        vm.vendors = $localStorage.getObject('vendors') || [];
        vm.segments = $localStorage.getObject('segments') || [];
        vm.categories = $localStorage.getObject('categories') || [];
        vm.units = $localStorage.getObject('units') || [];
        vm.buyers = $localStorage.getObject('buyers') || [];
        vm.evp = $localStorage.getObject('evp') || [];
        vm.defaultSelections = $localStorage.getObject('selections') || [];

        vm.years = timeFilterValues.years;
        vm.quarters = timeFilterValues.quarters;
        vm.months = timeFilterValues.months;

        vm.filterData = new Object();
        vm.filterData.vendors = $localStorage.getObject('selectedVendors') || '';
        vm.filterData.segments = $localStorage.getObject('selectedSegments') || '';
        vm.filterData.categories = $localStorage.getObject('selectedCategories') || '';
        vm.filterData.units = $localStorage.getObject('selectedUnits') || '';
        vm.filterData.buyers = $localStorage.getObject('selectedBuyers') || '';
        vm.filterData.evp = $localStorage.getObject('selectedEvp') || '';
        vm.filterData.date_start = $localStorage.getObject('selectedDateStart') || '';
        vm.filterData.date_end = $localStorage.getObject('selectedDataEnd') || '';
        vm.filterData.route = $localStorage.getObject('selectedRoute') || '';
        vm.filterData.currentToggle = $localStorage.getObject('currentToggle') || 'segments';
        vm.filterData.crossToggle = $localStorage.getObject('crossToggle') || 'evp';
        vm.filterData.years = $localStorage.getObject('selectedYears') || '';
        vm.filterData.quarters = $localStorage.getObject('selectedQuarters') || '';
        vm.filterData.months = $localStorage.getObject('selectedMonths') || '';

        vm.filterData.subroute = undefined;



    }

})();

where a controller is been defined and used further but I'm stuck at finding this controller where it gives this error

Error: [ng:areq] Argument 'MainController' is not a function, got undefined http://errors.angularjs.org/1.4.4/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined at REGEX_STRING_REGEXP (angular.js:68) at assertArg (angular.js:1795) at assertArgFn (angular.js:1805) at angular.js:9069 at setupControllers (angular.js:8133) at nodeLinkFn (angular.js:8173) at compositeLinkFn (angular.js:7637) at compositeLinkFn (angular.js:7641) at publicLinkFn (angular.js:7512) at angular.js:1660 as error

It might have something to do with you trying to $inject inside of the function body. Try moving it outside and see if that helps. — ach
Obvious guess but this was a mistake by this stackoverflow copy paste code and the ctrl + k moves some lines up and down for reasons unknown. — user2779417

ste2425 ste2425 · Accepted Answer · 2015-09-08T07:09:40

I believe it is your d3.js.

You've defined your app and it's dependencies in script.jshowever in d3.js you've added the empty array when accessing the module, removing this fixes the issue.

so in d3.js from

angular.module('app', [])
        .factory('d3Service'...

to

angular.module('app')
        .factory('d3Service'...

I think angular thinks you are re-defining your application. As the main controller is defined before d3.js i assume angular deletes it, then the ng-controller directive is looking for something that isn't there.

Controller function defined but not catched by angularjs

1 Answers