为什么自定义 angular 指令在 ng-disabled 设置为 true 时未被禁用

Question

我一直在 AngularJS 中使用 ngAria 和 ngDisabled 使用此处给出的示例 here .I modified the custom-checkbox directive in the example to set ng-disabled= true in the controller , that further sets aria-disabled=true as seen in the plunker 输出。

<some-checkbox role="checkbox" ng-model="checked" ng-class="{active: checked}" ng-disabled="isDisabled" ng-click="toggleCheckbox()" aria-label="Custom Checkbox" show-attrs>
    var app = angular.module('ngAria_ngModelExample', ['ngAria'])     
   .controller('formsController', function($scope){
    $scope.checked = false;
    $scope.isDisabled=true;
    $scope.toggleCheckbox = function(){
    $scope.checked = !$scope.checked;
    }
  })...

但是使用 ng-disabled=true 和 aria-disabled=true 这不会禁用 "Custom Checkbox"，如 plunker 输出中所示。根据文档 here 和 Whosebug 上的几个示例，"disabled" 属性仅适用于按钮、输入和文本区域。对于自定义指令（如上面的指令），ngDisabled 是可行的方法。但它似乎不适用于上面的例子。在这里的任何帮助表示赞赏。

Answer 1

The disabled attribute is only valid for certain elements such as button, input and textarea

ngDisabled 添加或删除元素的禁用属性。我建议您在自定义指令中观察禁用表达式，并添加/删除 class 以禁用您的组件。

Answer 2

与所有 ARIA 控件一样，浏览器不会免费为您提供任何 "behavior"。添加像 "button" 这样的角色的作用是指示 browser/screen-reader 如何处理公告以及如何处理键盘事件。我所说的 "what to do with keyboard events" 的意思是 "switch to-or-from forms mode automatically when the element receives focus".

这意味着您需要：

为键盘和 mouse/touch 命令实施事件处理程序，
实施视觉样式以传达组件的状态（例如禁用、启用或选中、未选中等），以及
实现状态的解释（所以禁用键盘和 touch/mouse状态为禁用时的处理）

Answer 3

如果您正在创建自己的组件并希望支持 ng-disabled，那么您可以在注入 $attrs 和 $parse 后将其添加到 $onInit 中：

// Watch ng-disabled
this.$scope.$watch(
  () => {
    let value = this.$attrs.ngDisabled;
    // Evaluate ng-disabled expression on parent scope
    let evaluated = this.$scope.$parent.$eval(value);
    return evaluated;
  },
  (disabled) => {
    this.disabled = disabled;
  }
);

为什么自定义 angular 指令在 ng-disabled 设置为 true 时未被禁用

Why is a custom angular directive not disabled with ng-disabled set to true

accessibility

angularjs-directive