Динамическая загрузка пользовательского интерфейса вкладки Jquery в angular

Я использую плагин вкладок jquery-ui.

Проблема, с которой я сталкиваюсь, заключается в том, что я загружаю вкладки при щелчке строки (таблица в 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>

Также я являюсь модальным окном, проблема в $("#tabs").tabs(); функция не синхронизируется с ng-repeat, я жду некоторое время, когда моя модель загружается, а затем вызываю ее, например

jsonData (в форме XML для простоты):

<data>
        <row>
            <Tab>General</Tab>
        </row>
        <row>
            <Tab>Locations</Tab>
        </row>
        <row>
            <Tab>Treatment</Tab>
        </row>
        <row>
            <Tab>Training</Tab>
        </row>
        <row>
            <Tab>Facilities</Tab>
        </row>
        <row>
            <Tab>Equipment</Tab>
        </row>
        <row>
            <Tab>Physicians</Tab>
        </row>
        <row>
            <Tab>People</Tab>
        </row>
    </data>

Сохранение данных:

$scope.tabs=jsonData;//save to model


     r =setTimeout(initTabs,500); //give some time to modal to save data  

         function initTabs(){
             $( "#tabs" ).tabs();
             console.log('timerCalled');
             r=clearTimeout();
          }

Теперь это работает в первый раз, но любые последующие щелчки для сброса вкладки приводят к тому, что вкладки имеют только одну вкладку и неясны.

Есть ли способ, которым я могу это сделать, я думаю о том, чтобы кто-то сбросил классы, добавленные функцией #id.tabs(), но ищет более простой способ.


javascript html jquery angularjs jquery-ui-tabs
person Snedden27    schedule 15.12.2015    source источник
comment
Пожалуйста, отредактируйте вопрос, чтобы включить код, вызываемый $(#tabs2).tabs(); В настоящее время я не вижу никакого кода, который либо инициализирует, либо изменяет коллекцию tabs.row.   -  person Miles Grimes    schedule 15.12.2015
comment
код, вызываемый $(#tab).tabs, находится в плагине jquery-ui для вкладок, он в основном берет HTML и добавляет к нему кучу классов css. Я добавил, как jsonData   -  person Snedden27    schedule 15.12.2015

Ответы (1)


arrow_upward
0
arrow_downward

Я понял, что могу отменить изменения, сделанные #selector.tabs(), с помощью #selector.destroy()

Единственная загвоздка в том, что я нашел способ, использовал ли я #selector.tabs или нет, один из способов:

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

Вот мой код повторной инициализации снова:

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