Javascript 在angular中动态加载Jquery选项卡UI

我正在使用jQueryUITabs插件

我遇到的问题是，我在一行单击中加载选项卡（html中的表格），因此，选项卡长度在每一行用户单击时都是动态的，而且我还使用角度指令在html中构建了选项卡

这就是我在angular中创建选项卡的方式

                 <div class="modal-body">
                     <div id='tabs'>
                        <ul >
                            <li  ng-repeat="row in tabs.row">
                              <a href="#tabs-{{$index +2}}">{{row.Tab}}</a>
                            </li>
                        </ul>
                        <div   ng-repeat="row in tabs.row" id="tabs-{{$index + 2}}">
                           {{row.Tab}}
                       </div>
                    </div>
               </div>

现在这是第一次，但是任何后续的重置选项卡的点击都会导致选项卡只有一个选项卡，并且是模糊的

---

有没有一种方法可以做到这一点，我正在考虑有人重置通过#id.tabs（）功能添加的类，但寻找一种更简单的方法

我发现我可以通过使用

\selector.destroy（）

还原由

\selector.tabs（）所做的更改

唯一需要注意的是，如果我使用了#selector.tabs或未使用#selector.tabs，我会找到一种方法，其中一种方法是：

if(selector.data("ui-tabs"))

这是我的重新初始化代码：

                   function initTabs(){
                        if ($( "#tabs2" ).data("ui-tabs")) {
                            $( "#tabs2" ).tabs( "destroy" );
                        }
                        $( "#tabs2" ).tabs();
                        console.log('timer');
                        r=clearTimeout();
                    }

请编辑问题，将$（“#tabs2”）.tabs（）调用的代码包括在内；目前我没有看到任何初始化或修改tabs.row集合的代码。由$（#tab）调用的代码。tabs在jquery ui插件中，用于tabs。它基本上采用HTML并向其中添加了一系列css类。我已经添加了jsonData的用法
if(selector.data("ui-tabs"))

                   function initTabs(){
                        if ($( "#tabs2" ).data("ui-tabs")) {
                            $( "#tabs2" ).tabs( "destroy" );
                        }
                        $( "#tabs2" ).tabs();
                        console.log('timer');
                        r=clearTimeout();
                    }