如何使用Angular指令切換可拖動

Question

我使用Angular JS指令在頁面上添加了可拖動的JQuery。 代碼如下：

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>

Angular JS控制器

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

Angular JS指令（可拖動）

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

我想做的是，一旦點擊編輯按鈕，我想啟用draggable （當$scope.editMode == true ）。 我在指令中嘗試了此操作，但無法正常工作。

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

我怎樣才能做到這一點？ 請幫我！

Answer 1

您永遠都不想以自己的方式訪問選項。 您要做的是將范圍的指令與Controller范圍內的內容綁定在一起。

基本上，您想監視在調用方作用域上存在的屬性的更改。 您將要在您的指令（ 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');
        });
    }