ui router - nested views with shared controller not working

Question

I have an abstract parent view that is meant to share a controller with its nested views, before I have a main controller that is the principal of my app

.state('main', {
    abstract: true,
    url: '/',
    templateUrl: 'app/templates/main.html',
    controller: 'mainController'
})

.state('main.edit', {
    abstract: true,
    url: '/edit',
    templateUrl: 'app/templates/edit.html',
    controller: 'editController'
})
.state('main.edit.details', {
    url: '/details',
    templateUrl: 'app/templates/editDetailsView.html',
    controller: 'editDetailsController'
})
.state('main.edit.info', {
    url: '/info',
    templateUrl: 'app/templates/editInfoView.html',
    controller: 'editInfoController'
})

The routing works as expected, before I set de controller, I have the parent controller of the module that would be edit controller and every controller of each view

The error:

"Error: [ng:areq] Argument 'editController' is not a function, got undefined
http://errors.angularjs.org/1.5.7/ng/areq?p0=editController&p1=not%20aNaNunction%2C%20got%20undefined
minErr/<@http://localhost:3000/js/libs.min.js:5:4923
assertArg@http://localhost:3000/js/libs.min.js:5:19120
assertArgFn@http://localhost:3000/js/libs.min.js:5:19322
$ControllerProvider/this.$get</<@http://localhost:3000/js/libs.min.js:7:31336
z/<.compile/<@http://localhost:3000/js/libs.min.js:15:2556
bind/<@http://localhost:3000/js/libs.min.js:5:12865
invokeLinkFn@http://localhost:3000/js/libs.min.js:7:22121
nodeLinkFn@http://localhost:3000/js/libs.min.js:7:4193
compositeLinkFn@http://localhost:3000/js/libs.min.js:6:26125
compile/<@http://localhost:3000/js/libs.min.js:6:24834
compilationGenerator/<@http://localhost:3000/js/libs.min.js:6:31172
l@http://localhost:3000/js/libs.min.js:15:1755
y/l.compile/<@http://localhost:3000/js/libs.min.js:15:2183
bind/<@http://localhost:3000/js/libs.min.js:5:12865
invokeLinkFn@http://localhost:3000/js/libs.min.js:7:22121
nodeLinkFn@http://localhost:3000/js/libs.min.js:7:4193
compositeLinkFn@http://localhost:3000/js/libs.min.js:6:26125
compile/<@http://localhost:3000/js/libs.min.js:6:24834
z/<.compile/<@http://localhost:3000/js/libs.min.js:15:2764
bind/<@http://localhost:3000/js/libs.min.js:5:12865
invokeLinkFn@http://localhost:3000/js/libs.min.js:7:22121
nodeLinkFn@http://localhost:3000/js/libs.min.js:7:4193
compositeLinkFn@http://localhost:3000/js/libs.min.js:6:26125
compile/<@http://localhost:3000/js/libs.min.js:6:24834
compilationGenerator/<@http://localhost:3000/js/libs.min.js:6:31172
l@http://localhost:3000/js/libs.min.js:15:1755
y/l.compile/</<@http://localhost:3000/js/libs.min.js:15:2175
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:3000/js/libs.min.js:9:24515
v/y.transitionTo/y.transition<@http://localhost:3000/js/libs.min.js:14:29498
processQueue@http://localhost:3000/js/libs.min.js:9:8733
scheduleProcessQueue/<@http://localhost:3000/js/libs.min.js:9:9000
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/js/libs.min.js:9:22223
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/js/libs.min.js:9:19908
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/js/libs.min.js:9:22650
done@http://localhost:3000/js/libs.min.js:8:7950
completeRequest@http://localhost:3000/js/libs.min.js:8:11757
createHttpBackend/</xhr.onload@http://localhost:3000/js/libs.min.js:8:12689
"

If I erase the editController, it works well, but what can I do if I need the shared controller of my views, other way it works if i set a the parent controller like this

.state('main.edit', {
        abstract: true,
        url: '/edit',
        templateUrl: 'app/templates/edit.html',
        controller: function($scope){
          console.log('edit parent controller');
        }

not the idea.

looks like you will forgot to specify a controller or you have a typo in the name of the controller. — Alexander Anikeev, Oct 03 '16 at 14:14
angular.module('app.edit', []) .controller('editController', ['$scope', function($scope, $state) { console.log('edit'); }]); — Pxion, Oct 03 '16 at 16:25

score 1 · Answer 1 · edited May 23 '17 at 12:26

I spent last 24 hours trying to find this. I was about to post a question/add to yours but I finally found my issue. In my case, after refactoring to the recommended format (separate file for module definition, controller definition, service definition etc) I left [] in some controller definition files like this in a few files:

(function () {
'use strict';

angular
    .module('app.landing', [])
    .controller('LandingController', LandingController);

That was overwriting app.landing module that has already been created. After reviewing and cleaning up all module definitions and component definitions that use those module references, it all works now. Phew.

(function () {
'use strict';

angular
    .module('app.landing')
    .controller('LandingController', LandingController);

Interestingly enough I read S/O answers with this very issue, i.e. Error: [ng:areq] from angular controller but I couldn't spot those crazy brackets in 2 files. It makes me question best practices endorsed by angular team a bit as if i had it all in one file, this would not be an issue. When I have 50 files to look over and I've been staring at the screen for hours, this is pretty challenging. I wish there was a check for multiple module definitions.

ui router - nested views with shared controller not working

1 Answers1