爲什麼角度指令只能有一個根元素

當我使用角度的指令時，我得到了這個錯誤。爲什麼角度指令只能有一個根元素

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

爲什麼角度指令只能有一個根元素

回答

相關問題