Question

我创建了一个侧边栏自定义指令。它正常工作，因为它加载到它应该的位置。标签不能正常工作。他们假设的行为是一个drowpdown，在点击时他们显示他们的内在元素。它直接粘贴代码时可正常工作，但在使用其他html文件中的代码调用指令时则无法正常工作。我拍了两张截图来显示使用class =＆＃34; page-sidebar＆＃34;在包含指令的html代码的文件中，并在＆＃34; root＆＃34;上使用它。文件：

很明显，第一个上没有应用高亮线条上的几个属性。

请帮助，因为我需要这个＆＃34;部分＆＃34;视图将在多个页面中使用。

编辑：指令代码：

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

EDIT2：

在帖子中添加此内容，因为它可能会让我感到困惑：

我看到混乱可能在哪里，但他们是不同的东西。＆LT;侧栏＆gt;是我创建的指令。类=＆＃34;页边栏＆＃34;来自我正在使用的模板，它是将所有内容格式化的地方。我试图插入class =＆＃34; page-sidebar＆＃34;进入指令，看看它是否有效，但它们是不同的东西。

EDIT3：

为了消除困惑，我希望：这两张照片都显示侧边栏正在工作。我知道它是一个元素，因此我使用＆lt;侧栏＆gt;，它的工作，这不是问题。问题是当我使用它时，Dropdown（如第二张图片所示）等内容在我点击它们时不起作用，而元素内容只是粘贴到index.html而不是侧边栏中.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内容。

Answer 1

您的主要问题是restrict: 'E',，它将其限制为元素。这解释了为什么它适用于<sidebar>，但不适用于<div class="sidebar">。如果要使用类，则需要将其更改为restrict: 'C'。

另一个问题是，当您尝试将该指令用作类时，您使用的是class="page-sidebar"而不是class="sidebar"。

请参阅docs指令。

Answer 2

来自角度文档：

restrict选项通常设置为：

'A' - 仅匹配属性名称
'E' - 仅匹配元素名称
'C' - 仅匹配班级名称
'M' - 仅匹配评论这些限制都可以根据需要合并：

'AEC' - 匹配属性或元素或类名

Answer 3

sidebar的指令定义对象非常清楚地表明，它将使用标记名sidebar处理DOM节点，以便根据restrict : 'E'属性呈现指令模板。

因此，将该指令用作HTML节点，而不是在类中（因为它需要将属性restrict设置为C个字母）。

<sidebar></sidebar>

AngularJS自定义指令丢失根属性

3 个答案: