Question

我使用meteor + angular，我想在指令中使用templateUrl来包含nav.ng.html
但我抛出错误

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

index.html：

 5 <body ng-app='checkApp' ng-controller='CheckCtrl'>
 6   <check-nav></check-nav>
 7 </body>

directive.js

  1 angular.module 'checkApp'
  2   .directive 'checkNav', () ->
  3   ┊ restrict: 'E'
  4   ┊ replace: true
  5   ┊ templateUrl: 'client/templates/check-views/nav.ng.html'

nav.ng.html

<div>test</div>

我该如何解决？

Answer 1

这是因为您的指令呈现的HTML（nav.ng.html）具有兄弟元素而不是包含所有元素的元素。

例如，这将导致错误：

<div>One</div>
<div>Two</div>

这没关系：

<div>
    <div>One</div>
    <div>Two</div>
</div>

所以你应该修改HTML只有一个根元素，错误就会消失。

Answer 2

您的 nav.ng.html 应如下所示：

<div>
  <div>test</div>
</div>

如果不起作用？然后也将index.html更改为：

<body ng-app='checkApp' ng-controller='CheckCtrl'>
  <div>   
     <check-nav></check-nav>
  </div>
 </body>

错误：[$ compile：tplrt]指令'checkNav'的模板必须只有一个根元素

2 个答案: