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

我试图遵循角度最佳实践建议并使用指令来封装可重用的 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 字符串时。一切正常。不幸的是，对于涉及两者的真实模板，我无法做到这一点' and“。除此之外，这个解决方案不会扩展到我计划的一些指令的更大模板。

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

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

有人知道这个问题的解决方案吗？我会很高兴提供任何帮助。

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

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

    };
})