如何在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;
};