1

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

响应性按其应有的方式发生（如下所示：http ://webtrendset.com/demo/easy-responsive-tabs/Index.html ），但是选项卡功能不起作用，这是整个想法。

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

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

4

1 回答 1

2

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

  • 您正在使用Tabs={...}，但您的指令被称为TabsDirective. 另外，指令必须有驼峰命名。所以你的指令应该重命名为tabsor tabsDirective（尽管在指令的名称中使用“指令”似乎有点多余）。
  • 您在 div 中使用<p>标签resp-tabs-container，但根据 Easy Responsive Tabs 文档，您应该使用<div>标签。

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

您可以使用一个技巧来使其工作：easyResponsiveTabs稍微延迟调用，以便 Angular 完全呈现 div 内容。您可以使用该$timeout服务来做到这一点。但是，它并不完美：如果延迟不够长，它可能不起作用，并且您可能会在 EasyReponsiveTags 插件转换之前看到原始标记（延迟越长，原始标记可见的时间越长）。你的 Plunker 的这个分叉说明了这一点。

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

于 2013-08-25T04:54:38.117 回答