帶有$ 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>