指令(嵌套在部分中)抛出“Termplate must have just a root element" [英] Directive (nested inside a partial) throws “Termplate must have exactly one root element”

问题描述

我正在尝试遵循角度最佳实践建议并使用指令来封装可重用的 HTML 元素.错误信息:

<块引用>

错误:模板必须只有一个根元素.是:partials/user/path/to/somedata.html

指令代码:

.directive('stDirectivename', function() {返回 {限制:'E'，替换:真的，//转置:假，模板:'partials/user/path/to/somedata.html'};})

和模板:

<span class = "personRoi"><i class="anotherclass" ng-class="{'specialclass1': person.count>=0,'specialclass2':person.count<0}"></i>{{person.somedata}}%</span>

在部分(它是模态的模板)中调用为:

当我在指令中将模板 url 替换为一个简单的 html 字符串时.一切正常.不幸的是，对于同时涉及 ' 和 的真实模板，我无法做到这一点.此外，此解决方案无法扩展到我计划针对某些指令的较大模板.

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

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

有人知道解决方案吗?我很乐意为您提供帮助.

解决方案

你的错误是:你必须使用 templateUrl 而不是 template 来表示路径html部分

.directive('stDirectivename', function(){返回 {限制:'E'，替换:真，//transclude:false,templateUrl:'partials/user/path/to/somedata.html'};})

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

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

the directive code:

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

And the template:

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

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

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.

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

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.

解决方案

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 must have just a root element"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！