javascript - 如何使用 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 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

您永远不想按照现在的方式访问选项。您需要做的是将作用域的指令与 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');
        });
    }