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

Question

更新：这是一个 gulp 问题，重新启动 gulp 解决了问题。

我正在使用 Angular 并尝试创建自定义指令导航栏。但我收到以下错误：

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

我的模板文件只有一个路由元素，而且文件路径是正确的，我想不出还有什么问题？谢谢

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 1

尝试更改：

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

该替换存在一些问题，因此可能会解决您的问题。

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

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

angularjs

angularjs-directive