Come disabilitare dinamicamente la direttiva ui-sortable in angular-ui

Question

Sto usando angular-ui per ordinabile usando la direttiva ui-sortable. È possibile abilitare/disabilitare dinamicamente funzionalità ordinabili in base allo stato dell'ambito? Quindi ho bisogno di avere un pulsante che cambia lo stato della proprietà scope e in base a questa proprietà sortable dovrebbe funzionare o meno.

Answer 1

Il mio primo tentativo a questo includerebbe un nuovo directive con una funzione di collegamento che compiles un frammento di modello include o non include ui-ordinabile basato su un certo valore nell'ambito.

Codice quando ho tempo.

Answer 2

È possibile utilizzare ui-if per passare da una versione ui-sortable a una versione non ordinabile, tuttavia si tratta di un design orribile. Tuttavia, se hai verificato il jQuery Sortable Docs sembra che ci sia un'opzione per disabled. Se la direttiva attualmente osserva l'oggetto opzioni per le modifiche, è possibile semplicemente attivare questa opzione. Se l'oggetto options è visto per riferimento e non per valore, allora forse dovresti aprire una richiesta pull con il tweak?

Answer 3

La direttiva angolare supporta guardare quando le opzioni ordinabili cambiano:

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

Quindi tutto quello che doveva fare era un'occhiata alla documentazione ordinabili jQueryUI, e aggiornare la proprietà corretta sul plugin.

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 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; 
};