AngularJS自定義指令失去根屬性

Question

我已經創建了一個邊欄自定義指令。 它在應加載的位置正常運行。 標簽無法正常工作。 他們的假設行為是drowpdown，當單擊它們時，它們顯示其內部元素。 當直接粘貼代碼時，它正常工作，但是當另一個HTML文件中的代碼調用指令時，它不能正常工作。 我拍了2張屏幕截圖，以顯示在包含指令的html代碼的文件內使用class =“ page-sidebar”與在“ root”文件上使用它之間的區別：

很明顯，突出顯示的行中的幾個屬性沒有應用在第一個屬性上。

請幫忙，因為我需要在多個頁面上使用它作為“局部”視圖。

編輯：指令代碼：

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

編輯2：

在帖子中添加此內容是因為它可能與我的解釋方式混淆：

我知道混亂可能在哪里，但它們是不同的東西。 <sidebar>是我創建的指令。 class =“ page-sidebar”來自我正在使用的模板，並且將所有內容格式化為它的位置。 我試圖將class =“ page-sidebar”插入指令中以查看其是否有效，但是它們是不同的。

編輯3：

為了消除混亂，我希望：兩張照片都顯示側邊欄正在工作。 我知道這是一個元素，因此我正在使用<sidebar>，它正在工作，這不是問題。 問題是當我使用它時，當我單擊它們時，諸如Dropdowns之類的內容（如第二張圖片所示）不起作用，而當元素內容只是簡單地粘貼到index.html中而不是在sidebar.html中時， 有用。

編輯4：

找到了問題，但仍然沒有解決方案。 我更改了一些內容，現在不在小部件上，而是在邊欄上了。 邊欄現在始終加載，並且頁面內容根據URL加載。 這有助於我找出問題所在：

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

先前的代碼在html中包含的plugins.js文件中。 由於某些原因，頁面加載時未運行此行。 當我在chrome控制台中運行此行時，出現了正確的小部件。

由於某些原因，頁面加載時未運行js內容。

Answer 1

您的主要問題是restrict: 'E', ，將其限制為元素。 這解釋了為什么它適用於<sidebar>而不適用於<div class="sidebar"> 。 如果要使用類，則需要對其進行更改以restrict: 'C' 。

另一個問題是，當您嘗試將指令用作類時，使用的是class="page-sidebar"而不是class="sidebar" 。

有關說明，請參見文檔 。

Answer 2

從角度文檔：

限制選項通常設置為：

• 'A'-僅匹配屬性名稱
• 'E'-僅匹配元素名稱
• 'C'-僅匹配類別名稱
• 'M'-僅匹配注釋這些限制可以根據需要全部組合：

'AEC'-匹配屬性或元素或類名稱

Answer 3

sidebar的指令定義對象非常清楚地聲明，由於restrict : 'E'屬性的影響，它將使用帶有標簽名稱sidebar的DOM節點來呈現指令模板。

因此，將該指令用作HTML節點，而不要在類中使用（因為這將要求將屬性restrict設置為C字母）。

<sidebar></sidebar>