0

我有一个属性,我在其中添加了“可拖动”指令。这将启用 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,但它不一定取决于项目的变化,而是取决于应用程序的状态,它结合了多个因素。我想要的只是一些简单的东西,如果启用返回错误,则使用 jQuery 来禁用可拖动元素,就像这样 - $(element).draggable("disable")

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

谢谢你的帮助!

4

1 回答 1

0

您可以将项目的状态传递给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/

于 2013-10-23T22:31:51.410 回答