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

index.html

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


js/views/directives/navbar.html

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


js/directives/navbar.js

angular
.module('bemoApp')
.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