Làm thế nào để tự động tắt chỉ thị có thể phân loại ui trong góc-ui

Question

Tôi đang sử dụng góc-ui cho có thể sắp xếp bằng chỉ thị có thể phân loại ui. Có thể bật/tắt tự động chức năng sắp xếp dựa trên trạng thái phạm vi không? Vì vậy, tôi cần phải có một nút mà thay đổi trạng thái của tài sản phạm vi và tùy thuộc vào tài sản này sắp xếp hoặc là nên làm việc hay không.

Answer 1

Lần đầu tiên tôi thực hiện việc này sẽ bao gồm directive mới với chức năng liên kết compiles một đoạn mẫu bao gồm hoặc không bao gồm ui-sortable dựa trên một số giá trị trong phạm vi.

Mã khi tôi có thời gian.

Answer 2

Bạn có thể sử dụng ui-if để chuyển đổi giữa phiên bản ui-sortable và phiên bản không thể sắp xếp, tuy nhiên đây là một thiết kế khủng khiếp. Tuy nhiên, nếu bạn đã xem jQuery Sortable Docs có vẻ như có một tùy chọn cho disabled. Nếu chỉ thị hiện đang xem đối tượng tùy chọn cho các thay đổi, bạn có thể chỉ cần chuyển đổi tùy chọn này. Nếu đối tượng tùy chọn được xem theo tham chiếu và không theo giá trị, thì có lẽ bạn nên mở yêu cầu kéo bằng tinh chỉnh?

Answer 3

Chỉ thị góc hỗ trợ quan sát khi các tùy chọn sắp xếp được thay đổi:

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

Vì vậy, tất cả các bạn phải làm là nhìn vào các tài liệu có thể phân loại jQueryUI, và cập nhật các tài sản chính xác về các 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; 
};