Как динамически отключить ui-sortable директиву в угловом ui

Я использую angular-ui для сортировки, используя директиву ui-sortable. Возможно ли динамическое включение/отключение сортируемых функциональных возможностей в зависимости от состояния области? Поэтому мне нужно иметь кнопку, которая изменяет состояние свойства scope и в зависимости от этого свойства сортируется либо должно работать, либо нет.

Ответ 1

Угловая директива поддерживает просмотр при изменении сортируемых параметров:

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>

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

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

Ответ 2

Моя первая попытка в этом случае будет включать новую директиву со ссылкой, которая компилирует фрагмент шаблона, включая или не включая ui-sortable на основе некоторого значения в области.

Код, когда у меня есть время.

Ответ 3

Вы можете использовать ui-if для переключения между ui-sortable версией и не сортируемой версией, однако это ужасный дизайн. Однако, если вы проверили сортировку JQuery Docs, кажется, что есть опция для disabled. Если директива в настоящее время наблюдает за объектом опций для изменений, вы можете просто переключить этот параметр. Если объект опций просматривается по ссылке, а не по значению, то, возможно, вам следует открыть запрос pull с помощью настройки?

Ответ 4

HTML

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

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

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