Question

更新：这是一个很大的问题，重启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 /视图/指令/ navbar.html

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

JS /指令/ 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
  };
}

替换时存在一些问题，因此可以解决您的问题。

角度错误：[$ compile：tplrt]当模板只有一个根元素？

1 个答案: