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

当我使用角度的指令时，我得到了这个错误。为什么角度指令只能有一个根元素

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>

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

来源

2016-02-26 user2650480

这是绝对的罚款。那必须是这样。使用/将其包装在一个元素中会出现什么问题？ – Jai

也许阅读官方文档有助于：https：//docs.angularjs.org/error/$compile/tplrt – Chanthu

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

替换指令元素的工作方式与交换操作类似，只是将指令元素与指令模板的根元素交换。如果没有单个根元素，则该交换是不可能的。

来源

2016-02-26 08:53:32 kicken

您可能在您的指令中使用了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' 
    } 
});

来源

2016-02-26 08:54:13

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

回答

相关问题