使用 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 来禁用可拖动元素，就像这样 - $(element).draggable("disable")

我觉得应该有一个简单的方法来做到这一点，但我似乎无法获得正常运行的指令。

感谢您的帮助！

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/