响应标签问题

Question

我已经为手风琴plunker创建了这个响应式标签 - http://plnkr.co/edit/plqTygiscmc2j9rB9bW0?p=preview - 现在使用AngularJS。

响应性应该发生（就像这样：http://webtrendset.com/demo/easy-responsive-tabs/Index.html），但是标签功能不起作用，这就是整个想法。

在尝试将它与angular（使用指令）集成之前，它工作正常，但想法是使用angularjs。

只是想知道我错过了什么？谢谢。

Answer 1

您的指令存在一些技术问题，以及架构问题。让我们从简单的部分开始：

• 您使用的是Tabs={...}，但您的指令名为TabsDirective。此外，指令必须有骆驼名称。所以你的指令应该重命名为tabs或tabsDirective（虽然在指令的名称中使用'directive'似乎有点多余。）
• 您在<p> div中使用了resp-tabs-container个代码，但根据Easy Responsive Tabs文档，您应该使用<div>代码。

现在到了大问题。当你的指令执行时，它所应用的div的内容尚未被Angular处理，所以当link函数运行并调用$(element).easyResponsiveTabs(...)时，元素标记没有完全呈现，插件根本不起作用。由于该指令适用于包装内容的div，因此它将始终在呈现该内容之前执行。

你可以使用hack来使其工作：稍微延迟easyResponsiveTabs调用，以便Angular完全呈现div内容。您可以使用$timeout服务来执行此操作。但它并不完美：如果延迟时间不够长，它可能无效，你可能会在EasyReponsiveTags插件转换之前看到原始标记（延迟时间越长，原始标记可见的时间越长）。这个fork of your Plunker说明了这一点。

我认为处理此问题的正确方法是创建一个控制选项卡呈现方式和时间的指令。如果您愿意这样做，Angular主页上“创建组件”部分中的示例应该可以帮助您入门。