在Angularjs中拖动项目时禁用jquery UI拖动

Question

在我的Angularjs 应用程序中，我有一个用户可以拖动每个项目的项目列表。每个项目都是指令并将其命名为simple-element：

app.directive('simpleElement',function(){
 return {
  restrict:'AE',
  template:'<span>Item</span>',
  controller:function(){

  },
  link:function(scope,element,attrs){
   element.draggable({
    revert:true,
    helper:'clone'
   });
  }
 }
});

现在我想当用户拖动每个项目时，即使拖动成功与否，制作项目disabled 的拖动事件，以便用户不能再次拖动项目。我在Plunker 上创建了一个带有拖放功能的示例。

Answer 1

我找到了解决办法。我不知道这是否是最佳做法，但它对我有用。我在link函数中插入这行代码：

 $scope.$watch('item.visible',function(){

                //Enable Disableing when Item draged
                if($scope.item.visible == false){
                    element.draggable( "disable" );
                }
                if($scope.levelModel.visible == true){
                    element.draggable( "enable" );
                }
            });

首先观察模型的visible 属性。然后如果模型中的属性发生变化，我决定启用或禁用该元素。