So I just started using AngularJS, and it seems perfectly fine so far, aside from one little snag. Let's say I have two directives, one of which requires the other, like so:
angular.module('components', [])
.directive('outer', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {},
link: function(scope) { ... },
controller: function($scope) { ... },
templateUrl: 'outer.html' // Note this
};
})
.directive('inner', function() {
return {
require: '^outer', // And this
restrict: 'E',
...
link: function(scope, element, attrs, outerCtrl) { ... },
templateUrl: 'inner.html'
};
});
used in the HTML something like this:
<outer>
<inner></inner>
</outer>
If outer.html loads before inner.html, then there is no problem at all. <outer> is transformed correctly and is assigned a scope and a controller, and <inner> receives that controller just fine.
If the templates load in the opposite order, however, <inner> is linked before <outer>’s controller has been created, and it fails with the error message “Error: no controller: outer”.
I have tried attaching a server-side load delay to inner.html, and as long as outer.html loads first, there are no problems anywhere whatsoever. Similarly, if I inline outer’s template (i.e. using template instead of templateUrl), that template becomes available first and it all works splendidly.
Does anyone know of a way to use templateUrl on directives that are required by other directives? In my actual code, it is vital that the inner directive have access to the outer’s controller, and I’d rather prefer templateUrl over template because the former separates layout from behaviour, and makes it much easier to configure the templates even after the behavioural code has grown large.
Thanks in advance, and sorry if this has already been asked before; I couldn’t find any equivalent questions on Stack Overflow.