angularjs – 指令(嵌套在局部内)抛出“Termplate必须只有一个根元素”

我正在尝试遵循角度最佳实践建议并使用指令
封装可重用的 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问题中读到这与在模板中有额外的空格/标签/注释有关.但我只是找不到这样的元素.

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

你的错误是：你必须使用templateUrl而不是模板,以便指出html部分的路径

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

    };
})

原文地址：https://www.jb51.cc/angularjs/141309.html