错误：[$compile:tplrt] 指令“footer”的模板必须只有一个根元素答案

【问题标题】：Error: [$compile:tplrt] Template for directive 'footer' must have exactly one root element错误：[$compile:tplrt] 指令“footer”的模板必须只有一个根元素
【发布时间】：2017-03-03 21:26:09
【问题描述】：

错误： angular.js:13920 错误：[$compile:tplrt] 指令“footer”的模板必须只有一个根元素。 app/components/footer/views/footer.html

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

索引：

<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"
    }
});

控制器页脚

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

}]);

【问题讨论】：

footer.html 中的 HTML 是什么样的？
footer.html 长什么样子？
这里有两个<section> 元素，每个元素都是“根”元素。尝试将整个内容包装在 <div> 中。
或者，您可以删除replace: true；它不仅在您的代码中没有必要，而且无论如何也已被弃用。
如果我删除替换：真的它的工作 :) 但我的 $scope.page 现在什么都不打印

标签： javascript angularjs

【解决方案1】：

您需要用一个元素将footer.html 中的html 包装起来，这样就只有一个根元素。

<div>
... your markup
</div>

这是必需的，因为您使用的是替换。以下是来自angular error docs 的更多详细信息。

【讨论】：

【解决方案2】：

来自文档：https://docs.angularjs.org/error/$compile/tplrt

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

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

【讨论】：