angularjs apply multiple directives same element

问题

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!

来源：https://stackoverflow.com/questions/27962378/angularjs-apply-multiple-directives-same-element

标签

javascript

angularjs

angularjs-directive