指令(嵌套在部分内部)抛出"Termplate必须只有一个根元素"

Question

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

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

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上的注释:空格或模板中的尾随注释也可能导致此错误.

看起来修复使Angular不那么气质可能会包含在下一个版本/更新中:github.com/angular/angular.js/issues/1459