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

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

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

似乎有一个修复方法可以让Angular减少气质，这可能会包含在下一个版本/更新中：github.com/angular/angular.js/issues/1459

Answer 3

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

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

3 个答案: