指令（嵌套在部分中）抛出“模板必须只有一个根元素”

Question

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

错误：模板必须只有一个根元素。是：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 问题中读到，这与模板中有额外的空间/标签/cmets 有关。但我就是找不到这样的元素。

有人知道解决方案吗？我很乐意为您提供任何帮助。

Answer 1

您的错误是：您必须使用templateUrl 而不是template 以指示html部分的路径

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

    };
})

Answer 2

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

还要注意 OP 上的 cmets：模板中的空格或尾随 cmets 也可能导致此错误。

似乎在下一个版本/更新中可能会包含一个让 Angular 不那么喜怒无常的修复：github.com/angular/angular.js/issues/1459

Answer 3

对于那些仍在寻找更多线索的人......当我在指令的 templateUrl 路径中输入错误时遇到了同样的错误。如果您有 replaced: true，则会收到此错误。否则，您可能会看到更疯狂的错误 WARNING: Tried to load angular more than once，这让我花了很长时间才弄清楚，因为错误消息确实具有误导性。