带有$ watch内部指令单独值的角度更新范围

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，看起来是true / false。 现在，我想使用我的控制器来更改“ enabled”属性。

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>