Question

我一直在使用给定here的示例在AngularJS中使用ngAria和ngDisabled。我修改了示例中的custom-checkbox指令，在控制器中设置ng-disabled = true，进一步设置了aria- disabled = true，如此处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，则不会禁用plunker输出中显示的“Custom Checkbox”。根据文档here和stackoverflow上的几个示例，“disabled”属性仅适用于按钮，输入和文本区域。对于自定义指令（如上所述），ngDisabled是可行的方法。但它似乎不适用于上述示例。任何帮助在这里表示赞赏。

Answer 1

disabled属性仅对某些元素有效，例如button，input和textarea

ngDisabled向您的元素添加或删除disabled属性。我建议您在自定义指令中查看禁用的表达式，并添加/删除一个类以禁用您的组件。

Answer 2

如果你要创建自己的组件，你想要支持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;
  }
);

Answer 3

与所有ARIA控件一样，浏览器不会给你任何＆＃34;行为＆＃34;免费。添加了什么角色，比如＆＃34; button＆＃34;它是否指示浏览器/屏幕阅读器如何处理公告以及如何处理键盘事件。我的意思是＆＃34;如何处理键盘事件＆＃34;，这意味着＆＃34;当元素获得焦点时自动切换到表格模式＆＃34;。

这意味着你需要：

为键盘和鼠标/触摸命令实现事件处理程序，
实现视觉样式以传达组件的状态（例如禁用，启用或选择，未选择等）和
实现状态的解释（因此禁用键盘和禁用状态时触摸/鼠标处理）

为什么在禁用ng-disabled时禁用自定义角度指令设置为true

3 个答案: