Пользовательская директива AngularJS, теряющая свойства корня

Question

Я создал специальную директиву боковой панели. Он работает нормально, когда он загружается там, где должен. То, что работает неправильно, это теги. Их предполагаемое поведение - это поведение дроупауна, где при нажатии они показывают свои внутренние элементы. Он работает правильно, когда код вставлен напрямую, но не тогда, когда директива вызывается с кодом внутри другого html-файла. Я взял 2 скриншоты, чтобы показать разницу между использованием класса = «страница-врезку» в файле, который содержит HTML код директивы и использовать его на файл «корень»:

Довольно ясно, что несколько свойств выделенных строк не применяются к первому.

Пожалуйста, помогите, поскольку мне это нужно как «частичное» представление, которое будет использоваться на нескольких страницах.

EDIT: Директива Код:

app.directive('sidebar', function() { 
    return { 
     restrict: 'E', 
     templateUrl: "/app/views/sidebar.html" 
    }; 
}); 

EDIT2:

Добавление этого в пост, так как это может привести к путанице от того, как я объяснил:

я вижу, где путаница может быть, но они разные. < sidebar> - это созданная мной директива. class = "page-sidebar" из шаблона, который я использую, и является тем, что форматирует все на свое место. Я попытался вставить class = "page-sidebar" в директиву, чтобы увидеть, будет ли это работать, но они разные.

EDIT3:

Чтобы прояснить ситуацию, я надеюсь: оба фото показать боковую панель работает. Я знаю, что это элемент, и поэтому я использую < sidebar>, он работает, это не проблема. Проблема в том, что когда я его использую, содержимое, такое как Dropdowns (как показано на втором рисунке), не работает, когда я нажимаю на них, тогда как содержимое элемента просто вставляется в index.html, а не в sidebar.html , оно работает.

EDIT4:

Нашли проблему, но до сих пор нет решения. Я изменил некоторые вещи, а вместо боковой панели теперь виджеты. Боковая панель теперь всегда загружается, и содержимое страницы загружается в зависимости от URL-адреса. Это помогло мне отследить вопрос:

$(".owl-carousel").owlCarousel({mouseDrag: false, touchDrag: true, slideSpeed: 300, paginationSpeed: 400, singleItem: true, navigation: false,autoPlay: true}); 

предыдущий код в plugins.js файле, который включен в HTML. По какой-то причине эта строка НЕ ​​запускается при загрузке страницы. Когда я запустил эту строку на консоли хром, появился соответствующий виджет.

По какой-то причине содержимое js не запускается при загрузке страницы.

Answer 1

Ваша основная проблема - restrict: 'E',, что ограничивает ее элементами. Это объясняет, почему он работает для <sidebar>, но не для <div class="sidebar">. Если вы хотите использовать классы, вам необходимо изменить его на restrict: 'C'.

Другая проблема заключается в том, что, когда вы пытаетесь использовать директиву как класс, вы используете class="page-sidebar", а не class="sidebar".

Для директив см. docs.

Answer 2

От угловой документации:

Ограничить параметр обычно устанавливается:

• 'A' - только матчи имени атрибута
• 'E' - только совпадает с именем элемента
• «C '- соответствует только названиям классов
• ' M '- матчи comment Все эти ограничения могут быть сгруппированы по необходимости:

«AEC» - соответствует либо атрибута или элемента или имя класса

Answer 3

Объект определения директивы для sidebar совершенно ясно сказано, что он будет относиться к узлу DOM с именем тега sidebar, чтобы сделать шаблон директивы из-за restrict : 'E' Недвижимость.

Так что используйте директиву как узел HTML, а НЕ в классе (так как для свойства restrict должно быть установлено значение C).

<sidebar></sidebar>