Ошибка: [$compile: tplrt] Шаблон для директивы 'нижний колонтитул' должен содержать ровно один корневой элемент

#javascript #angularjs

Вопрос:

Ошибка: angular.js: 13920 Ошибка: [$compile:tplrt] Шаблон для директивы ‘footer’ должен содержать ровно один корневой элемент. app/components/footer/views/footer.html

Я пытаюсь вызвать нижний колонтитул с помощью директивы, не перегружая ng include. Он выдает ошибку root, но путь указан правильно. Я не понимаю, почему эта ошибка. Я еще не пробовал свой заголовок, но, вероятно, у меня такая же ошибка.

Указатель:

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

}]);

1. как выглядит HTML в footer.html ?

2. Как footer.html выглядит?

3. здесь у вас есть два <section> элемента, каждый из которых является «корневым» элементом. попробуйте обернуть все это в <div> .

4. в качестве альтернативы, вы можете просто удалить replace: true ; это не только не обязательно в вашем коде, но и в любом случае устарело.

5. если я удалю replace: true, это сработает 🙂 но мой $ scope.page пока ничего не печатает

Ответ №1:

Из документации по адресу:https://docs.angularjs.org/error /$compile/tplrt

Когда директива объявляется с помощью template (или templateUrl) и включен режим замены, шаблон должен иметь ровно один корневой элемент. То есть текст свойства template или содержимое, на которое ссылается templateUrl, должно содержаться в одном html-элементе.

следовательно, включите ваш код в div или какой-либо другой элемент.

Ответ №2:

Вам нужно обернуть html в footer.html одним элементом, чтобы был только один корневой элемент.

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

Это требуется, поскольку вы используете replace. Вот более подробная информация из документов angular error.