在使用 ui-router 更新路由更改的指令中初始化 jQuery 选项卡答案

【问题标题】：Initialize jQuery tabs in a directive that update on route change with ui-router在使用 ui-router 更新路由更改的指令中初始化 jQuery 选项卡
【发布时间】：2016-03-18 14:51:46
【问题描述】：

我正在尝试为标签初始化一个 jquery 插件。整个指令对我来说是新的，但我得到了以下工作。但是，当我单击另一个列表项时，它不会重新初始化选项卡部分。每次我点击一个新项目并且 ui-router 更改路由或内容时，有没有办法重新初始化它？

编辑：也许需要澄清一些：

标签只是一个 jQuery 插件，让我的生活更轻松。但是，这些选项卡在工作之前需要初始化。我通常使用 HTML 底部的 jQuery 脚本来执行此操作，但这不适用于我拥有的 Angular 设置。我单击的每个项目都会打开一个带有选项卡的详细信息部分。正如我第一次单击它成功实例化的项目并出现选项卡一样。但是，如果我单击另一个项目，选项卡将不起作用。它仅适用于一项，即使它们都具有我的指令“tabstuff”的属性。 UI 路由器就是我控制交换数据的方式。

app.directive('tabstuff', function() {
    var linker = function(scope, element, attr){
        $(document).ready(function(){
    $('ul.tabs').tabs();
  });
    };
  return {
    restrict: 'A',
    link: linker
  };
});

正如我所提到的，我对指令的想法很陌生。请随时帮助我改进代码的任何部分。

【问题讨论】：

解释你想达到什么目标？您想为每个标签设置唯一的状态吗？
不，标签只是一个 jQuery 插件，让我的生活更轻松。但是，这些选项卡在工作之前需要初始化。我通常使用 HTML 底部的 jQuery 脚本来执行此操作，但这不适用于我拥有的 Angular 设置。我单击的每个项目都会打开一个带有选项卡的详细信息部分。正如我第一次单击它成功实例化的项目并出现选项卡一样。但是，如果我单击另一个项目，选项卡将不起作用。它仅适用于一项，即使它们都具有我的指令“tabstuff”的属性。 UI 路由器就是我控制交换数据的方式。

标签： angularjs angularjs-directive angular-ui-router

【解决方案1】：

我认为使用原生 Angular 特性来创建 tabs 指令要好得多。

您可以使用sytabs

index.html

<script src="path/to/sy-tabs.js"></script>

app.js

angular.module('yourApp', ['sy.tabs']);

要使用 syTabs，请在 HTML 中插入如下内容：

<sy-tabs>
  <sy-pane title="Pane 1">
    <p>Lorem Ipsum...</p>
  </sy-pane>
  <sy-pane title="Pane 2">
    <p>Lorem Ipsum...</p>
  </sy-pane>
  ...
</sy-tabs>

【讨论】：