Javascript angularjs将多个指令应用于同一元素

我有一个带有templateUrl的指令，用于显示定制的下拉列表。此指令将DOM元素附加到元素节点，而不替换它：

<cross-dropdown>

    <!-- First Directive Template Content Start-->
    <div></div>
    <!-- First Directive Template Content End-->

</cross-dropdown>

这里是第二个定义：

angular.module('someModule').directive('firstDirective'....
    templateUrl: '/4_Common/1_views/directives/dropdown.html',
    replace: false,
    priority:10,

angular.module('someModule').directive('secondDirective'....
    templateUrl: 'some-template',
    transclude: true,
    replace: true,
    priority: 1

第二个指令模板：

<div>
    <span ng-transclude></span>
    <span>
        <span></span>
    </span>
</div>

因此，我可以将第一个指令生成的内容移动到ng TRANCLUDE span，以最终获得此内容：

<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>

但我得到了错误“多指令要求模板”。在使用优先级并检查无法修复此错误后，我想问一下，我试图实现的目标是否可能，或者是否违反了指令规则。 注意，我有一个使用element和compile的工作版本来附加这个DOM内容，而不是使用模板，但我希望将模板保存在一个单独的HTML文件中。 提前谢谢

<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>