Combination of transclude, templateUrl, require produces "Error: [$compile:ctreq] Controller 'foo', required by directive 'blubb', can't be found!" #14768
Description
Dear angular guys,
we encountered following unexpected error message while using a combination of transclude with fallback content, templateUrl, and require:
angular.js:13642 Error: [$compile:ctreq] Controller 'foo', required by directive 'blubb', can't be found!
http://errors.angularjs.org/1.5.6/$compile/ctreq?p0=foo&p1=blubb
at angular.js:68
at getControllers (angular.js:9237)
at getControllers (angular.js:9244)
at nodeLinkFn (angular.js:9160)
at compositeLinkFn (angular.js:8459)
at nodeLinkFn (angular.js:9151)
at angular.js:9496
at processQueue (angular.js:16104)
at angular.js:16120
at Scope.$eval (angular.js:17378)
The error occurs in following situations:
- A directive "bar" is defined with transclusion and an embedded fallback content
- The embedded fallback-content contains a directive "barr" which template is loaded via templateUrl
- The template of "barr" contains a directive "blubb" which requires a top controller "foo"
- Directive "bar" is used and own content is provided so the transclusion fallback content should be discarded.
The error does not show up, if no content on "bar" is provided and fallback content is used. Either it does not show up if template is provided via "template"-property and not "templateUrl"-property.
It looks like the error has no functional impact and just produces noise in the javascript console.
Reproducable: always
Browsers: Chromium 50, Firefox 46
Operating system: Linux
AngularJs: 1.5.6, 1.4.0, 1.3.0
Steps to reproduce:
You can run this: https://plnkr.co/edit/0r3IFyL8og0Wo4sGIPBW
Or use following code:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<div foo>
<!-- Produces error in console -->
<bar>Hi there!</bar>
<!-- Works fine -->
<bar></bar>
</div>
<script>
angular.module('myApp', [])
.directive('foo', function() {
return {
restrict: 'A',
controller: function(){}
};
})
.directive('bar', function($templateCache) {
return {
transclude: true,
template: '<ng-transclude><barr></barr></ng-transclude>'
};
})
.directive('barr', function($templateCache) {
$templateCache.put("tmpl/barr.html", '<div blubb>Hello World!</div>');
return {
templateUrl: 'tmpl/barr.html'
};
})
.directive('blubb', function() {
return {
restrict: 'A',
require: ['^foo'],
link: function() {}
};
})
</script>
</body>
</html>
update 1:
Our expected behaviour is that if the "fallback content" from a transclude is not used there should be no lookup of required controllers from any directives from inside this discarded "fallback content".