Почему возникает ошибка если не обернуть директиву при её расширении?

Question

[vasIvas]

Почему при таком раскладе возникает ошибка?

template: '',

<div class="container">
	<sub></sub>
</div>
<script>
	function superDirective(){
		return {
			template: '<div>text</div>'
		}
	}

	function subDirective(){
		return {
			template: '<super></super>',
			replace: true
		}
	}
	
	const app = angular.module("app", []);
	
	app.directive('super', ['$injector', superDirective]);
	app.directive('sub', ['$injector', subDirective]);
</script>

Но если обернуть расширяемую директиву, то нет?
template: '<div><super></super></div>',

Answer 1

[Сергей Протько]

https://docs.angularjs.org/error/$compile/multidir...

там все написано. Конкретно ваш случай:
- Multiple directives attempting to define a template or templateURL.

когда вы делаете replace: true, ваш шаблон содержит только один элемент - super, и текущий элемент - sub, заменяется на super и у вас выходит так что две директивы ссылаются на один элемент. В свою очередь Super имеет свой темплейт, и происходит конфликт. Если бы там небыло темплейта - все было бы хорошо.