How to move standalone controller into a directive? - angularjs

Question

I had a working angular app, but I want to restructure it a bit. I had a pile of directives that weren't really doing anything, and although the entire app was supposed to be encapsulated by a single directive, I still had my two main controller declarations outside that directive.
I merged those two controllers, because although they take care of different concerns (one handles functional data, the other navigation state), they are both necessary for the entire app.
Secondly, I wanted to get rid of the loose declaration and go from:
<div ng-app="myApp" class="myApp" ng-cloak ng-controller="myController">
<myAppdirective ng-controller="myNavigationController"></myAppdirective>
</div>
to:
angular.module('myApp').
directive('myAppDirective', ['myController', function(myController) { {
return {
restrict: 'AE',
replace: true,
scope: true,
controller: myController,
template: '<div>' +
'<ng-include src="\'partials/navigation.html\'">' +
'<ng-view></ng-view>' +
'</div>'
};
}]);
Mysteriously, this doesn't work. Shouldn't this work?
I get this error: https://docs.angularjs.org/error/$injector/unpr?p0=myControllerProvider%20%3C-%20myController%20%3C-%20myAppDirective
I tried using ngController inside the template, but that gave me TypeError: Cannot read property 'insertBefore' of null somewhere deep in angular code.
I'm at a loss. I'm probably doing somthing fundamentally wrong. But what?
Solution: I reverted the merging of my two controllers. This restores the separation of concerns I originally had, and it fixes that mysterious TypeError.
My directive now looks like this:
(function() {
'use strict';
/*global angular */
angular.module('myApp').
directive('myAppDirective', function() {
return {
restrict: 'AE',
replace: true,
scope: true,
controller: 'myController',
template: '<div ng-controller="myNavigationController">' +
'<ng-include src="\'partials/navigation.html\'"></ng-include>' +
'<ng-view></ng-view>' +
'</div>'
};
});
})();
This seems to work fine.

Answer 1

I don't think you can inject controller instances. That's probably where the error is coming from (based on that error, it looks like you renamed your actual controller name when posting the question). You should just need to use a string for the controller property.
angular.module('myApp').
directive('myAppDirective', [function() { {
return {
restrict: 'AE',
replace: true,
scope: true,
controller: 'myController',
template: '<div>' +
'<ng-include src="\'partials/navigation.html\'">' +
'<ng-view></ng-view>' +
'</div>'
};
}]);
See How can I use a registered controller in my angular directive?

Answer 2

By default, the scope property of every directive is set to false unless other specified. You are setting your scope to true, then applying the same controller that the directive is located in.
Simply put, remove scope: true, and controller: myController - your directive will inherit the scope from the parent controller and all will be well.