Jose Cerejo Jose Cerejo - 1 month ago 8
Javascript Question

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

Error:
angular.js:13920 Error: [$compile:tplrt] Template for directive 'footer' must have exactly one root element. app/components/footer/views/footer.html

I'm trying to call the footer by a directive without being over ng include. He is giving a root error but the path is right. I'm not understand why this error.
I not try my header yet but probably have the same error.

Index:

<div footer> </div>


Footer:

<!-- Footer Section -->
<section class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-sm-3 logotipos">
<img src="../../../../assets/img/logotipos/blip.png" width="185" />
</div>
<div class="col-sm-3 logotipos">
<img src="../../../../assets/img/logotipos/farfetch.png" width="185" />
</div>
<div class="col-sm-3 logotipos">
<img src="../../../../assets/img/logotipos/mobintec.png" width="185" />
</div>
<div class="col-sm-3 logotipos">
<img src="../../../../assets/img/logotipos/rumos.png" width="185" />
</div>
</div>
</div>
</div>
</section>

<!-- Footer Section -->
<section class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-8">
<ul class="list-inline quicklinks">
<li><a href="#" style="color: white;">Eventos</a></li>
<li><a href="#" style="color: white;">Dicas</a></li>
<li><a href="#" style="color: white;">Contactos</a></li>
<li><a href="#" style="color: white;">Parceiros</a></li>
<li><a href="#" style="color: white;">Termos e Condições</a></li>
<li><a href="#" style="color: white;">Políticas de Privacidade</a></li>
</ul>
<p style="text-align: left; clear: both; color: white; font-size: 12px;">Copyright @ 2016 Todos os direitos reservados</p>
</div>
<div class="col-lg-4">
<ul class="list-inline quicklinks redes_sociais">
<li><a href="#"><img src="../../../../assets/img/redessociais/instagram.png" width="25" /></a></li>
<li><a href="#"><img src="../../../../assets/img/redessociais/twitter.png" width="25" /></a></li>
<li><a href="#"><img src="../../../../assets/img/redessociais/linkedin.png" width="25" /></a></li>
<li><a href="#"><img src="../../../../assets/img/redessociais/facebook.png" width="25" /></a></li>
</ul>
</div>
</div>
</div>
</section>


App:

app.directive('footer', function () {
return {
restrict: 'A', //This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
replace: true,
templateUrl: "app/components/footer/views/footer.html",
controller: "footer"
}
});


controller footer

'use strict';
/**
* Clip-Two Main Controller
*/
app.controller("footer", ["$scope", function($scope) {
$scope.page = "ola footer";
console.log("teste = ".$scope.page);

}]);

Answer

From the docs at : https://docs.angularjs.org/error/$compile/tplrt

When a directive is declared with template (or templateUrl) and replace mode on, the template must have exactly one root element. That is, the text of the template property or the content referenced by the templateUrl must be contained within a single html element.

hence include your code in a div or some other element.