0

我正在编写一个指令，该指令需要具有不同的根元素，基于mode我传递给指令的属性。以下是预期的模板文件：

模板文件：

<div ng-if="mode === 'full'">
    <div>
        ...
    </div>
    <input (a lot of attributes...)
           class="datepicker" />
</div>

<input ng-if="mode === 'short'"
       (a lot of attributes...)
       class="datepicker" />

但是当然 AngularJS 抱怨你必须在模板中有一个根元素。

我知道我可以将它们拆分为 2 个文件并在内部有条件地加载templateUrl（即templateUrl: function(tElem, tAttrs) { if tAttrs.mode === 'full' ...）。

但在我的情况下是一个具有许多不同属性的元素，这些属性在和模式<input class="datepicker" />中都是相同的。理想情况下，我会把它放在一个单独的指令中，但我觉得在我的情况下这有点矫枉过正。然后将两个结果保存在 2 个不同的模板中，将导致共享信息（属性）解耦到 2 个单独的文件中。任何在模式下更改任何内容的人都需要记住在模式下进行相同的更改，这将驻留在不同的文件中。fullshortinputinputinputshortinputfull

问题：如何在单个模板文件中处理这种情况？

注意：在这种情况下，我真的不能添加单个包装元素（例如<div>）。这会违反我的布局。

4

0 回答 0