Angular 错误：[$compile:tplrt] 当模板只有一个根元素时？答案

【问题标题】：Angular Error: [$compile:tplrt] when template has only one root element?Angular 错误：[$compile:tplrt] 当模板只有一个根元素时？
【发布时间】：2017-09-30 09:59:41
【问题描述】：

更新：这是一个 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
  };
}

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

尝试改变：

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

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

【讨论】：

不幸的是，这完全停止了网站加载。
感谢您的帮助，我现在已经解决了这个问题。原来这是 gulp 的问题，它只需要重新启动。