I have a directive with templateUrl for displaying a custom made dropdown. This directive appends DOM elements to element node without replacing it:
<cross-dropdown>
<!-- First Directive Template Content Start-->
<div></div>
<!-- First Directive Template Content End-->
</cross-dropdown>
Then I want to create another one for validations, so It can append more DOM elements into the content inserted by first directive, so the result will be:
<cross-dropdown>
<!-- First Directive Template Content Start-->
<div></div>
<!-- First Directive Template Content End-->
<!-- Second Directive Template Content Start-->
<div></div>
<!-- Second Directive Template Content End-->
</cross-dropdown>
So here we have first directive definition:
angular.module('someModule').directive('firstDirective'....
templateUrl: '/4_Common/1_views/directives/dropdown.html',
replace: false,
priority:10,
And here second one definition:
angular.module('someModule').directive('secondDirective'....
templateUrl: 'some-template',
transclude: true,
replace: true,
priority: 1
Second directive template:
<div>
<span ng-transclude></span>
<span>
<span></span>
</span>
</div>
So I can move content generated by first directive to ng-transclude span to have finally this content:
<cross-dropdown>
<div>
<span ng-transclude>
<!-- First Directive Template Content Start-->
<div></div>
<!-- First Directive Template Content End-->
</span>
<!-- Second Directive Template Content Start-->
<span>
<span></span>
</span>
<!-- Second Directive Template Content End-->
</div>
</cross-dropdown>
But I'm getting error "Multiple Directives Asking for template". After playing with priority and check that I can't fix this error, I want to ask if what I'm trying to achieve is possible anyway or breaks directives rules. Note that I have a working version using element and compile to append this DOM content instead of using template, but I would like to keep template in a separate HTML file. Thanks in advance!