我有一个属性,我在其中添加了"可拖动"指令。这将启用 jQuery UI 可拖动组件。我的指示如下:
testModule.directive('draggable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.draggable({ revert: true });
}
}
});
我有一个范围函数,可以检查是否应该启用/禁用这些项目。我正在使用 ng 类指令来添加/删除禁用的类。它看起来如下(它显然做了其他事情,但为了简单起见,我只返回 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("禁用")
我觉得应该有一种简单的方法来做到这一点,但我似乎无法获得正常运行的指令。
感谢您的任何帮助!
您可以将项的状态传递给已创建的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/