Directive (nested inside a partial) throws “Termplate must have exactly one root element”

问题

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.

回答1:

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'

    };
})

回答2:

For those that may come after, also note that directive templates need to have --as the error says-- only one root element i.e. multiple spans or divs must be enclosed in a root div.

Also note the comments on the OP: Whitespace or trailing comments in the template may result in this error as well.

It appears a fix to make Angular less temperamental about this may be included in the next release/update: github.com/angular/angular.js/issues/1459

回答3:

For those who are still looking for further clues...I ran into this same error when I had a typo in the templateUrl path of the directive. You get this error if you have replaced: true. Otherwise, you may see more wild error as WARNING: Tried to load angular more than once, which took me quite a while to figure out because the error message is really misleading.

来源：https://stackoverflow.com/questions/19676326/directive-nested-inside-a-partial-throws-termplate-must-have-exactly-one-root

标签

angularjs

angularjs-directive