ui Router - verschachtelte Ansichten mit gemeinsamen Controller nicht funktionieren

Question

Ich habe eine abstrakte übergeordnete Ansicht, die einen Controller mit seinen verschachtelten Ansichten teilen sollte, bevor ich eine Hauptsteuerung, die die Haupt meiner App ist

.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' 
}) 

Das Routing funktioniert wie erwartet, bevor ich de-Controller gesetzt, ich habe die übergeordnete Steuerung des Moduls, die Editier-Steuerung und jeder Controller jede

die Fehler Ansicht wäre:

"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 
" 

Wenn ich die editController löschen, es funktioniert gut, aber was kann ich tun, wenn ich den gemeinsamen Controller meiner Ansichten benötigen, andere Art und Weise funktioniert es, wenn ich eine der übergeordnete Steuerung wie diese

gesetzt

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

nicht die Idee.

Answer 1

Ich verbrachte letzten 24 Stunden damit, das zu finden. Ich wollte gerade eine Frage stellen/hinzufügen, aber ich habe mein Problem gefunden. In meinem Fall nach (für Moduldefinition separate Datei, Controller-Definition, Service-Definition usw.) auf das empfohlene Format Refactoring verlassen ich in ein paar Dateien in einigen Controller-Definition Dateien wie diese []:

(function() { 
'use strict'; 

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

Das war App.landing-Modul überschreiben, das bereits erstellt wurde. Nach dem Überprüfen und Bereinigen aller Moduldefinitionen und Komponentendefinitionen, die diese Modulreferenzen verwenden, funktioniert alles jetzt. Puh.

(function() { 
'use strict'; 

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

Interessanterweise habe ich gelesen, S/O Antworten mit diesem Problem, das heißt Error: [ng:areq] from angular controller aber ich konnte nicht diese verrückten Klammern in 2 Dateien erkennen. Das bringt mich dazu, Best Practices, die von eckigen Teams unterstützt werden, zu hinterfragen, als ob ich alles in einer Datei hätte. Das wäre kein Problem. Wenn ich 50 Dateien habe, über die ich schauen kann, und ich stundenlang auf den Bildschirm gestarrt habe, ist das ziemlich schwierig. Ich wünschte, es gäbe eine Überprüfung für mehrere Moduldefinitionen.