Question

我们说我有两个可拖动的元素

<div draggable enabled="false"></div>
<div draggable enabled="false"></div>

要启用/禁用元素，我使用以下指令：

App.directive('draggable', function() {
return {
restrict:'A',
link: function(scope, element, attrs) {
    element.draggable();

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

  });
}
};});

我设置了一个$ watch，看起来是真/假。现在我想使用我的控制器来更改已启用的＆＃39;属性。

App.controller('TypeAheadController',function($scope){

//some code
$scope.enabled = true;
});

但是，当我使用它时，所有可拖动的元素都被引用。所以它们都被启用或禁用。我认为这很奇怪，因为我希望$ watch在每个可拖动元素的范围内查找启用的值。我的目标是单独启用/禁用可拖动元素。所以我需要一种方法来为控制器中的每个可拖动元素设置/引用enabled属性。

Answer 1

您可以更改指令以拥有它自己的范围：

App.directive('draggable', function () {
    return {
        restrict: 'A',
        scope: { 
            enabled: '='
        },
        link: function (scope, element, attrs) {
            element.draggable();

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

            });
        }
    };
});

要让控制器控制每个单独的指令，您需要为每个指令配置相应的配置：

App.controller('TypeAheadController', function ($scope) {
    $scope.draggableItems = [{enabled:true},{enabled: true}];
});

并在您的HTML中：

<div ng-repeat="draggable in draggableItems" draggable enabled="draggable.enabled"></div>

角度更新范围，包含$ watch inside指令的各个值

1 个答案: