Question

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

<cross-dropdown>

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

</cross-dropdown>

然后我想创建另一个用于验证，因此它可以将更多DOM元素附加到第一个指令插入的内容中，因此结果将是：

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

所以这里我们有第一个指令定义：

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

但我收到错误＆＃34;多个指令要求模板＆＃34;。在优先玩游戏并检查我无法解决此错误之后，我想问一下，无论如何我想要实现的是什么，或者是否违反了指令规则。请注意，我有一个使用元素和编译的工作版本来附加此DOM内容而不是使用模板，但我想将模板保存在单独的HTML文件中。提前谢谢！

angularjs应用多个指令相同的元素

0 个答案: