Jak dynamicznie wyłączać dyrektywę ui-sortable w kątowym-ui

Question

Używam kątowego-ui do sortowania przy użyciu dyrektywy ui-sortable. Czy możliwe jest dynamiczne włączanie/wyłączanie funkcji sortowalnych w zależności od stanu zakresu? Potrzebuję więc przycisku, który zmienia stan właściwości scope i w zależności od tej właściwości sortable albo powinno działać, albo nie.

Answer 1

Moja pierwsza próba obejmowałaby nową directive z funkcją linku, która zawiera compiles fragment szablonu obejmujący lub nie zawierający ui-sortable na podstawie pewnej wartości w zakresie.

Kod, gdy mam czas.

Answer 2

Można użyć ui-if, aby przełączać między wersją ui-sortable a wersją nie-sortowalną, jednak jest to okropny projekt. Jeśli jednak wyewidencjonowałeś numer jQuery Sortable Docs, wydaje się, że istnieje opcja dla disabled. Jeśli dyrektywa aktualnie obserwuje obiekt opcji zmian, możesz po prostu przełączyć tę opcję. Jeśli obiekt opcji jest obserwowany przez odniesienie, a nie przez wartość, to być może powinieneś otworzyć żądanie ściągania za pomocą poprawki?

Answer 3

kątowe dyrektywa wspiera oglądanie gdy oczyszczenia nasion zmienić opcje:

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

Więc wszystko, co musiałem zrobić, to patrzeć na jQueryUI sortable dokumentacji i zaktualizuj odpowiednią usługę na wtyczce.

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