Josh Josh - 3 years ago 230
AngularJS Question

Angular Error: [$compile:tplrt] when template has only one root element?

UPDATE: This was a gulp issue, restarting gulp solved the problem.

I am using Angular and trying to create a custom directive navbar. But I am getting the following error:

Error: [$compile:tplrt] Template for directive 'navbar' must have exactly one root element.

My template file only has one route element and the file path is correct, I can't figure out what else could be wrong? Thanks


<!DOCTYPE html>
<html ng-app="bemoApp">
<base href="/">
<meta charset="utf-8">
<!-- inject:js -->
<!-- endinject -->
<!-- inject:css -->
<!-- endinject -->
<section ui-view></section>


<li><a ui-sref="register">Register</a></li>
<li><a ui-sref="login">Login</a></li>


.directive('navbar', navbar);

function navbar() {
return {
restrict: 'E',
templateUrl: 'js/views/directives/navbar.html',
replace: true

Answer Source

Try changing:

function navbar() {
  return {
    restrict: 'E',
    templateUrl: 'js/views/directives/navbar.html',
    replace: false

there are some issues with that replace, so that may resolve your problem.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download