javascript - 错误: [$compile:tplrt] Template for directive 'footer' must have exactly one root element

Question

错误:angular.js:13920 错误:[$compile:tplrt] 指令“footer”的模板必须只有一个根元素。应用程序/组件/页脚/views/footer.html

我试图通过指令调用页脚而不超过 ng include。他给出了一个根本错误，但路径是正确的。我不明白为什么会出现这个错误。我还没有尝试我的标题，但可能有同样的错误。

索引:

<div footer> </div>

页脚:

<!-- 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.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 页脚

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

}]);

Answer 1

来自文档: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.

因此将您的代码包含在 div 或其他元素中。