각도 Ui에서 ui-sortable 지시문을 동적으로 비활성화하는 방법

Question

ui-sortable 지시문을 사용하여 정렬 할 수있는 각도 Ui를 사용하고 있습니다. 범위 상태에 따라 정렬 가능한 기능을 동적으로 활성화/비활성화 할 수 있습니까? 그래서 범위 속성의 상태를 변경하고이 속성에 따라 정렬 할 수있는 버튼이 필요합니다.

Answer 1

첫 번째 시도는 compilescompiles 범위의 일부 값을 기반으로 ui-sortable을 포함하거나 포함하지 않는 링크 기능을 가진 새로운 directive을 포함합니다.

시간이있을 때 코드.

Answer 2

ui-if을 사용하면 ui-sortable 버전과 정렬 할 수없는 버전간에 전환 할 수 있습니다.하지만 이것은 끔찍한 디자인입니다. 그러나 jQuery Sortable Docs을 확인한 경우 disabled에 대한 옵션이있는 것으로 보입니다. 지시문에서 현재 옵션 객체가 변경 사항을 감시하는 경우이 옵션을 간단히 전환 할 수 있습니다. 옵션 객체가 값이 아닌 참조에 의해 감시된다면 아마도 조정 요청과 함께 요청을 열어야합니까?

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

그래서 당신이해야 할 일을했을 모두가 jqueryui 정렬 설명서를 봐, 그리고 플러그인의 올바른 속성을 업데이트 다음 정렬 옵션을 변경할 때

Answer 3

각도 지시문을보고 지원합니다.

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

대답 제이슨에 대한