Question

错误： angular.js：13920错误：[$ compile：tplrt]指令模板＆＃39;页脚＆＃39;必须只有一个根元素。应用/组件/页脚/视图/ footer.html

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

指数：

<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：

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

}]);

Answer 1

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

的文档

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

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

Answer 2

您需要使用单个元素将footer.html中的html包装起来，以便只有一个根元素。

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

这是必需的，因为您正在使用替换。以下是angular error docs的详细信息。

错误：[$ compile：tplrt]指令模板＆＃39;页脚＆＃39;必须只有一个根元素

2 个答案: