使用 Angular JS 动态更新 jQuery UI 属性的最佳方法

Best way to dynamically update jQuery UI attribute with Angular JS?

本文关键字：属性 最佳 方法 UI jQuery Angular JS 动态 更新 使用      更新时间：2023-09-26

我有一个属性，我在其中添加了"可拖动"指令。这将启用 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/

相关文章：