Question

当我使用angular的指令时出现此错误。

  Error: [$compile:tplrt] Template for directive 'header' must have exactly one root element. /apps/dhe.techForm/views/directives/header.html
    http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=header&p1=%2Fapps%2Fdhe.techForm%2Fviews%2Fdirectives%2Fheader.html
        at angular.js:68
        at angular.js:8512
        at processQueue (angular.js:14792)
        at angular.js:14808
        at Scope.$eval (angular.js:16052)
        at Scope.$digest (angular.js:15870)
        at Scope.$apply (angular.js:16160)
        at done (angular.js:10589)
        at completeRequest (angular.js:10787)
        at XMLHttpRequest.requestLoaded (angular.js:10728)

因此，如果我的指令的html如下，则会抛出角度误差

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

指令的html如下所示是可以的。

<section>
<div>
</div>
<div>
</div>
</section>

为什么angular指令只能有一个根元素？

Answer 1

当您的指令配置为替换指令元素而不是其内容时，angular需要使用单个根元素作为替换。

替换指令元素的工作方式类似于交换操作，因为它只是将指令元素与指令模板的根元素交换。如果没有单个根元素，则无法进行此交换。

Answer 2

您可能在指令中使用了replace: true，这就是为什么当angular想要替换元素时需要一个根元素。

当使用template（或templateUrl）声明指令并替换模式时，模板必须只有一个根元素。也就是说，模板属性的文本或templateUrl引用的内容必须包含在单个html元素中。

要避免这种情况，您可以在指令中尝试不使用replace: true属性。

您可以使用：

myModule.directive('myDirective', function factory() {
  return {
    replace: true,
    templateUrl: 'someUrl'
  }
});

立即尝试：

myModule.directive('myDirective', function factory() {
    return {
       templateUrl: 'someUrl'
    }
});

为什么angular指令只能有一个根元素

2 个答案: