I am getting error Error: [$compile:tplrt] while using directive in angularjs
Question
In angularJS 1.3.14
var app = angular.module('myApp',[]); app.controller('myController',['$scope',function($scope){ $scope.name = 'world'; }]); //here i created directive of name helloWorld app.directive('helloWorld',function(){ return { replace:true, restrict:'AE', template :'<h3>Hello world<h3/>' } }); <html ng-app='myApp'> <body ng-controller = "myController"> <hello-world/> </body> </html>
Error: [$compile:tplrt] Template for directive 'helloWorld' must have exactly one root element.
How to solve this error?
3 answers
solution1
1 ACCPTED 2015-12-23 09:02:25
Quick fix
Root cause( replace: true )
-
<hello-world></hello-world> - change directive template to close
h3tag properlytemplate :'<h3>Hello world</h3>'
Explanation
There are two problem in your code.
- You should close your directive custom element like
<hello-world><hello-world/>. If you do not close the tag, first occurrence will work fine but after that rest of the thing will not work. See here . - Other thing is your template of directive has wrong
template
Directive template
<h3>Hello world<h3/>
should be
<h3>Hello world</h3>
You have template in directive like <h3>Hello world<h3/> which has not closing the h3 tag properly.
So that gets rendered on page like below, which has two h3 element.
<h3>Hello world</h3>
<h3></h3>
So the render html has two elements which are individual. So while passing them to $compile service to compile the content of template, it is throwing [$compile:tplrt] which means your template should have single root element, so the angular will compile that element.
solution2
0 2015-12-23 08:57:17
comment the replace: true.
var app = angular.module('myApp',[]);
app.controller('myController',['$scope',function($scope){
$scope.name = 'world';
}]);
//**here i created directive of name helloWorld**
app.directive('helloWorld',function(){
return {
restrict:'AE',
//replace:true,
template :'<h3>Hello world<h3/>'
};
});
or
//**here i created directive of name helloWorld**
app.directive('helloWorld',function(){
return {
restrict:'AE',
replace:true,
template :'<div><h3>Hello world<h3/></div>'
};
});
solution3
0 2015-12-23 09:03:58
You are getting the error because in your directive you are using replace:true and the template is enclosed in h3 tag winch is not closed properly (you should close h3 tag using </h3> not <h3/> ).
You should enclose the template in a root tag properly like <h3>Hello world</h3> .
When a directive is declared with template (or templateUrl) and replace mode on, the template must have exactly one root element. That is, the text of the template property or the content referenced by the templateUrl must be contained within a single html element. For example,
<p>blah <em>blah</em> blah</p>instead of simplyblah <em>blah</em> blah. Otherwise, the replacement operation would result in a single element (the directive) being replaced with multiple elements or nodes, which is unsupported and not commonly needed in practice.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.