Question

我使用Angular JS指令将JQuery draggable添加到页面中。代码如下所示：

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 Controller

...
$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

您永远不希望以您的方式访问选项。你想要做的是将你的范围指令与你控制器范围内的指令联系起来。

基本上，您希望监视调用者范围内存在的属性的更改。您需要在指令（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');
        });
    }

如何使用Angular指令切换draggable

1 个答案: