指令（嵌套部分）抛出“Termplate必须有一个根元素” [英] Directive (nested inside a partial) throws “Termplate must have exactly one root element”

问题描述

我试图按照角最佳实践建议，并使用指令
 封装reusuable HTML元素。
错误消息：

I'm trying to follow angular best practice recommendation and use directives to encapsulate reusuable HTML elements. The error message:

错误：模板必须有一个根元素。是：谐音/用户/路径/要/ somedata.html

Error: Template must have exactly one root element. was: partials/user/path/to/somedata.html

指令code：

.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>

结果：在部分（这是一个模态的模板），为被叫

＆LT; ST-directivename＆GT;＆LT; / ST-directivename＆GT;

Called in the partial (which is the template of a modal) as:
<st-directivename></st-directivename>

当我更换模板URL在指令中一个简单的HTML字符串。一切正常。不幸的是我不能这样做，对于既包括 和真正的模板。除了这个解决方案将无法扩展到更大的模板，我打算到一些指令。

when I replace the template url for a simple html string in the directive. Everything works. Unfortunately I can't do that for the real template that involves both ' and". besides this solution won't scale to the larger templates I plan to some directives.

此外，当我刚插入模板HTML而不是指令的标签，一切工作正常（我实际上是从现有的HTML提取code，使其可重复使用）。

Also when I just insert the template html instead of the directive tag, everything works correctly (I'm actually extracting the code from the existing html to make it reusable).

我在其他的SO问题读取这与具有在模板额外的空间/标签/评论的事。但我就是找不到这样的元素。

I read in other SO questions that this has to do with having extra space/tags/comments in the template. But I just can't find such elements.

是否有人知道一个解决方案？我会很高兴的任何帮助。

Does anybody know a solution for this? I'll be glad for any help.

推荐答案

你的错误是：你必须使用 templateUrl ，而不是模板以便指示路径的HTML部分

your mistake is: you must use templateUrl rather than template so as to indicate the path to the html partial

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

    };
})

这篇关于指令（嵌套部分）抛出“Termplate必须有一个根元素”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！