用Angular JS動態更新jQuery UI屬性的最佳方法是什麼？

Question

我有一個屬性，我在其中添加了「可拖動」指令。這使jQuery UI可拖動組件。我的指示如下：

testModule.directive('draggable', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
     element.draggable({ revert: true }); 
     } 
    } 
    }); 

我有一個作用域函數，檢查這些項目是否應該啓用/禁用。我正在使用ng-class指令來添加/刪除禁用的類。它看起來如下（這顯然是其他的東西，但爲了簡單起見，我剛剛返回false）：

$scope.enabled = function(){ 
    return false; 
} 

所以讓我的殘疾類應用，我可以這樣做：

<span draggable data-ng-repeat="item in items" data-ng-class="{disabled: enabled()}">{{item.Name}}</span> 

我的問題是，如果我想要做一些類似的事情，並且啓用時返回false，那麼執行此操作的最佳方法是什麼。我研究過使用$ watch，但它並不是必須依賴於項目的變化，而是取決於應用程序的狀態，它結合了多種因素。我想要的是簡單的說，如果啓用返回false抓住元素，並使用jQuery禁用可拖動像這樣 - $（元素）.draggable（「禁用」）

我覺得應該有一個直接的方式做到這一點，但我似乎無法得到一個指令，以正常工作。

感謝您的幫助！

Answer 1

您可以將項目的狀態傳遞給您已經創建的draggable指令。

HTML：

<div draggable="item.enabled" data-ng-repeat="item in items" ng-class="{disabled: !item.enabled }"> 
    {{item.name}} 
</div> 

的JavaScript：

//in your controller 
$scope.items = [{ name:'item1', enabled: false}, { name:'item2', enabled: true}, { name:'item3', enabled: true}, { name:'item4', enabled: false}, { name:'item5', enabled: true}]; 

app.directive('draggable', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
     $(element).draggable({ revert: true, disabled: !scope.$eval(attrs.draggable) }); 
     } 
    } 
}); 

http://jsbin.com/aZosUrE/4/