AngularJS自定義指令丟失根屬性

我已經創建了一個側邊欄自定義指令。當它加載到應該在的位置時它正常工作。標籤無法正常工作。他們所設想的行爲就是一種下沉式的行爲，在點擊時他們會展示內在的元素。當直接粘貼代碼時，它可以正常工作，但當指令被另一個html文件中的代碼調用時，它不會正常工作。我花了2截屏顯示使用類=「頁面側邊欄」，其中包含該指令的HTML代碼的文件中，並使用它的「根」文件之間的差異：AngularJS自定義指令丟失根屬性

很明顯，突出顯示的行上的幾個屬性未應用於第一個屬性。

請幫助，因爲我需要這個作爲一個「部分」的意見，跨越幾頁使用。

編輯：指令代碼：

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

EDIT2：

在帖子中添加這一點，因爲它可能從我如何解釋它是混亂：

我看到那裏的混亂可能是，但他們是不同的東西。 <側邊欄>是由我創建的指令。 class =「page-sidebar」來自我正在使用的模板，它是什麼格式的一切到它的位置。我試圖在指令中插入class =「page-sidebar」來查看它是否可行，但它們是不同的。

EDIT3：

要清理的混亂，我希望：這兩個圖片顯示側邊欄工作。我知道這是一個元素，因此我正在使用<側邊欄>，它正在工作，這不是問題。問題在於，當我使用它時，下拉菜單等內容（如第二張圖所示）在單擊它們時不起作用，而元素內容僅粘貼到index.html而不粘貼在sidebar.html中，有用。

EDIT4：

發現這個問題，但仍然沒有解決。我改變了一些東西，而不是側邊欄它現在在窗口小部件上。補充工具欄現在總是被加載，這是根據URL加載的頁面內容。這幫助我追蹤了這個問題：

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

上述代碼位於html中包含的plugins.js文件中。出於某種原因，這一行不會在頁面加載時運行。當我在Chrome控制檯中運行這一行時，出現了適當的小部件。

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

來源

2016-03-10 Forget

你能發佈一些你的指令代碼嗎？這可能是在指令上的東西... –

在原來的帖子中編輯它！ – Forget

使用'restrict ='C''，如果您使用'restrict：'E'，那麼使用元素標籤，即'' –

您的主要問題是restrict: 'E',，這是限制它的元素。這解釋了爲什麼它適用於<sidebar>，但不適用於<div class="sidebar">。如果您想使用課程，則需要將其更改爲restrict: 'C'。

另一個問題是，當您試圖將該指令用作類時，您使用的是class="page-sidebar"而不是class="sidebar"。對於指令，請參閱docs。

來源

2016-03-10 17:56:52

那麼我應該有什麼？我刪除它，它仍然無法正常工作... – Forget

@Forget - 更新了答案...如果您希望您的指令僅適用於類，則需要'restrict：'C''。 –

我看到混淆的地方，但它們是不同的東西。是由我創建的指令。 class =「page-sidebar」來自我正在使用的模板，它是什麼格式的一切到它的位置。我試圖在指令中插入class =「page-sidebar」來查看它是否可行，但它們是不同的東西！ – Forget

從角文檔：

的限制選項通常設置爲：

'A' - 僅匹配屬性名稱
'E' - 僅匹配元素名稱
「C ' - 只匹配類名
'M' - 只匹配評論這些限制可以根據需要進行組合：

「AEC」 - 無論是屬性或元素或類名稱匹配

來源

2016-03-10 18:02:33 jkordas

請檢查EDIT3。我瞭解每個人都有同樣的困惑，我不相信這是問題所在！ – Forget

您sidebar該指令定義對象相當明確指出，將治療與標籤名稱sidebar DOM節點渲染由於指令模板restrict : 'E'屬性。

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

<sidebar></sidebar>

來源

2016-03-10 18:04:46

我在OP中編輯了它，但是發生了什麼：側欄元素是由我創建的。它工作正常，已完成。頁面邊欄是我使用的管理模板頁面創建的類。這是因爲CSS和所有這一切。問題是，當sidebar.html的內容位於索引內時，它可以正常工作，但是，當我將內容移動到sidebar.html並簡單使用de < sidebar >元素時，它會顯示正確的ul和li和內容，但是會顯示下拉列表，例如，不工作。希望我能清除它！ – Forget

@忘記，我想下拉菜單可能不起作用，因爲他們無法從父範圍訪問函數。您可以添加整個場景中涉及的角碼，即_controller_或任何具有下拉按鈕邏輯的角碼。同時，我需要看看'/ app/views/sidebar.html'結構。 –

請檢查我的編輯。我改變了結構，因爲側欄是「固定的」，頁面內容根據URL加載。我在那裏有一些小工具，但是現在不工作。任何問題，可以幫助請做狀態！ – Forget

AngularJS自定義指令丟失根屬性

回答

相關問題