在指令中使用$watch的单个值对范围进行角度更新

Angular update scope with individual values for $watch inside directive

本文关键字：范围 更新 单个值 指令 watch      更新时间：2023-09-26

假设我有两个可拖动元素

<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，看起来可以是真/假。现在我想使用我的控制器来更改"enabled"属性。

App.controller('TypeAheadController',function($scope){
//some code
$scope.enabled = true;
});

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

您可以更改指令以拥有自己的作用域：

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>
相关文章：