2014-07-03 49 views
0

我使用Angular JS指令將JQuery可拖動對象添加到頁面。代碼如下所示:如何使用Angular指令切換可拖動對象

HTML

... 
<table> 
    <tr ng-repeat="row in rows" 
     directive-draggable 
     directive-droppable> 
     <td>{{row.data1}}</td> 
     <td>{{row.data2}}</td> 
     ... 
    </tr> 
</table> 
<button type="button" ng-click="toggleEditMode()">EDIT</button> 

角JS控制器

... 
$scope.editMode = false; 
... 
$scope.toggleEditMode = function() { 
    $scope.editMode = !$scope.editMode; 
} 

角JS指令(可拖動)

return { 
    link: function($scope, $element, $attrs) { 
     $element.draggable({ 
      ...logic... 
     }); 
    } 
} 

我想要做的就是有一次我打編輯按鈕,我想啓用draggable(當$scope.editMode == true)。我在指令中試過這個,但它不起作用。

if($scope.$parent.$parent.editMode) { 
    $element.draggable({ 
     ... 
    }) 
} 

我該怎麼做?請幫幫我!

回答

1

你永遠不想按照自己的方式訪問選項。你想要做的是將你的範圍指令與你的控制器範圍內的東西綁定。

基本上你想監視調用者範圍內存在的屬性的更改。您需要在您的指令中創建一個隔離範圍(https://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive)。

例如:(http://jsfiddle.net/TwoToneBytes/5jVUM/1)。這裏的重要部分:

scope: { 
     enabled: '=' 
    }, 
    link: function (scope, elem, attrs) { 
     var $elem = $(elem); 
     $elem.draggable(); 

     scope.$watch('enabled', function (val) { 
      $elem.draggable(val === true ? 'enable' : 'disable'); 
     }); 
    }