AngularJS - 可排序标签

时间:2013-09-12 11:25:32

标签: angularjs tabs angularjs-directive jquery-ui-sortable angular-ui

我想使用 uiSortable 指令(https://github.com/angular-ui/ui-sortable)和AngularUI bootstrap(http://angular-ui.github.io/bootstrap/)中的标签创建可排序标签。对我来说重要的是能够使用ng-model对模型中的元素进行排序。所以,我在元素上添加了ui-sortableng-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>

实际上, sortable 应用于外部div,因此我可以抓住ul.tab-content,而实际上我想对这些li元素进行排序。

我首次尝试解决该问题的方法是使用 compile 函数创建 uiSortableTabs 指令,将ui-sortable属性添加到ul(仅使用{{ 1}})。好的是现在标签是可排序的。不好的是,现在sortable不知道模型。我尝试在attr()上调用.attr('ng-model',attrs.ngModel)并添加ul。现在可以排序看模型,但它是ui-sortable

有没有人知道如何使用可更新模型制作可排序标签如何正确地向元素添加指令,以及在其他指令中使用 compile 函数的ngModel

1 个答案:

答案 0 :(得分:0)

我正在使用类似的工具,我的解决方案是直接使用jQuery ui sortable并通过挂钩启动和停止事件来更改数据模型。