AngularJS - сортировочные вкладки

Question

Я хотел создать сортируемые вкладки, используя uiSortable директива (https://github.com/angular-ui/ui-sortable) и вкладки из AngularUI bootstrap (http://angular-ui.github.io/bootstrap/). Для меня важна способность сортировать элементы в модели, используя ng-model. Итак, я добавил ui-sortable и ng-model="someArray" на элемент. Она не работает таким образом, потому что tabset заменяется со структурой типа, что:

<div> 
    <ul> 
    <li>tab 1 header</li> 
    <li>tab 2 header</li> 
    <li>tab 3 header</li> 
    </ul> 
    <div class="tab-content"> tabs content </div> 
</div> 

и, по сути, сортировкой применяется к наружному DIV, так что я могу захватить ul и .tab-content, когда на самом деле я хотел сортировать те li элементов.

Моя первая попытка на решение этой проблемы было создание uiSortableTabs директиву с компилировать функцию, которая добавляет ui-sortable атрибута ul (используя только attr()). Хорошо, что теперь вкладки сортируются. Плохо то, что теперь сортируемый не знает о модели. Я пробовал использовать .attr('ng-model',attrs.ngModel) на этом ul вместе с добавлением ui-sortable. Теперь отсортируйте модель, но это undefined.

Кто-нибудь знает как сделать сортируемую вкладку с обновляемой моделью или , как правильно добавить директиву к элементу, вместе с ngModel использования компилировать функции в другой директиве?

Answer 1

Я работал с подобным, мое решение заключается в том, чтобы напрямую использовать jQuery ui sortable и изменить модель данных, подключив событие start и stop.