如何在angular-ui中动态禁用ui-sortable指令

Question

我使用angular-ui进行可排序使用ui-sortable指令。 是否可以根据范围状态动态启用/禁用可排序功能？ 所以我需要一个按钮来改变范围属性的状态，并根据这个属性进行排序要么应该工作，要么不工作。

Answer 1

angular指令支持观察可排序选项何时更改：

scope.$watch(attrs.uiSortable, function(newVal, oldVal){

所以你要做的就是查看jqueryui可排序文档，并更新插件上的正确属性。

HTML

<ul ui-sortable="sortableOptions" ng-model="items">
   <li ng-repeat="item in items">{{ item }}</li>
 </ul>
<button ng-click="sortableOptions.disabled = !sortableOptions.disabled">Is Disabled: {{sortableOptions.disabled}}</button>

JS

app.controller('MainCtrl', function($scope) {
  $scope.items = ["One", "Two", "Three"];

  $scope.sortableOptions = {
    disabled: true
  };
});

Answer 2

我对此的第一次尝试将包括一个带有链接函数的新指令 ，该函数根据范围中的某些值编译包含或不包括ui-sortable的模板片段。

我有时间的代码。

Answer 3

您可以使用ui-if在ui-sortable版本和不可排序版本之间切换，但这是一个可怕的设计。 但是，如果你检查了jQuery可排序文档 ，似乎有一个disabled选项。 如果指令当前正在查看选项对象以进行更改，则只需切换此选项即可。 如果通过引用而不是值来监视选项对象，那么也许您应该通过调整打开一个pull-request？

Answer 4

HTML

<div class="group-container" ui-sortable="vm.groupSortable" ng-model="group.groups">

JS

vm.groupSortable = {
    connectWith: ".group-container",
    disabled: true
};

vm.disableDragAndDrop = function(bVar)
{
    vm.groupSortable.disabled = bVar;
};