I use meteor+angular, I want use templateUrl in directive to include nav.ng.html
but I throw a error
Error: [$pile:tplrt] Template for directive 'checkNav' must have exactly one root element
index.html:
5 <body ng-app='checkApp' ng-controller='CheckCtrl'>
6 <check-nav></check-nav>
7 </body>
directive.js
1 angular.module 'checkApp'
2 .directive 'checkNav', () ->
3 ┊ restrict: 'E'
4 ┊ replace: true
5 ┊ templateUrl: 'client/templates/check-views/nav.ng.html'
nav.ng.html
<div>test</div>
how can I fixed it?
I use meteor+angular, I want use templateUrl in directive to include nav.ng.html
but I throw a error
Error: [$pile:tplrt] Template for directive 'checkNav' must have exactly one root element
index.html:
5 <body ng-app='checkApp' ng-controller='CheckCtrl'>
6 <check-nav></check-nav>
7 </body>
directive.js
1 angular.module 'checkApp'
2 .directive 'checkNav', () ->
3 ┊ restrict: 'E'
4 ┊ replace: true
5 ┊ templateUrl: 'client/templates/check-views/nav.ng.html'
nav.ng.html
<div>test</div>
how can I fixed it?
Share Improve this question edited Jul 8, 2015 at 15:23 nataila asked Jul 8, 2015 at 15:16 natailanataila 1,6194 gold badges20 silver badges26 bronze badges2 Answers
Reset to default 5This results from the fact the the HTML your directive is rendering (nav.ng.html) has sibling elements instead of one that wraps all.
For instance, this will result in the error:
<div>One</div>
<div>Two</div>
This will be fine:
<div>
<div>One</div>
<div>Two</div>
</div>
So you should fix the HTML to have only one root element and the error will go away.
your nav.ng.html should look like this:
<div>
<div>test</div>
</div>
if it not works? then also change index.html as:
<body ng-app='checkApp' ng-controller='CheckCtrl'>
<div>
<check-nav></check-nav>
</div>
</body>