angularjs - 指令(嵌套在部分内)抛出 “Termplate must have exactly one root element”

Question

我正在尝试遵循 Angular 最佳实践建议并使用指令来
封装可重用的 HTML 元素。
错误信息:

Error: Template must have exactly one root element. was: partials/user/path/to/somedata.html

指令代码:

.directive('stDirectivename', function() {
    return {
        restrict: 'E',
        replace: true,
        // transclude: false,
        template: 'partials/user/path/to/somedata.html'
    };
})

和模板:

<div ng-show="person.condition" class="someclass">
    <span class = "personRoi">
        <i class="anotherclass " ng-class="{'specialclass1': person.count>=0,'specialclass2':person.count<0}">

        </i>{{person.somedata}}%
    </span>
</div>

在部分(这是模态的模板)中调用为: <st-directivename></st-directivename>
当我在指令中将模板 url 替换为一个简单的 html 字符串时。一切正常。不幸的是，对于涉及 ' 的真实模板，我无法做到这一点。和 “ .除了这个解决方案不会扩展到我计划的一些指令的更大的模板。

此外，当我只插入模板 html 而不是指令标签时，一切正常(我实际上是从现有的 html 中提取代码以使其可重用)。

我在其他 SO 问题中读到这与模板中有额外的空间/标签/评论有关。但我就是找不到这样的元素。

有人知道解决方案吗？我会很高兴得到任何帮助。

Answer 1

对于之后可能出现的那些，还要注意指令模板需要有——正如错误所说——只有一个根元素，即多个跨度或 div 必须包含在一个根 div 中。

另请注意 OP 上的注释:模板中的空白或尾随注释也可能导致此错误。

似乎可以在下一个版本/更新中包含一个使 Angular 不那么喜怒无常的修复程序:github.com/angular/angular.js/issues/1459