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

Question

I played with ngAria and ngDisabled in AngularJS using the example below . I changed the custom flags directive in the example to set ng-disabled = true in the controller, which additionally sets aria-disabled = true, as shown in plunker here.

<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;
    }
  })...

But with ng-disabled = true and aria-disabled = true, this does not disable "Custom Checkbox", as shown by the plunker output. According to the documentation here and a few examples in stackoverflow, the "disabled" attribute only works for buttons, input, and text area. For custom directives (like above) ngDisabled is the path. But this does not seem to work for the above example. Any help here is appreciated.

Answer 1

A disabled attribute is valid only for certain elements, such as a button, input, and text area.

ngDisabled . / .

Answer 2

, ng-disabled, $onInit $attrs $parse:

// 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;
  }
);

Hide result

Answer 3

ARIA, "" . , "button", , /-, . " ", " ", ".

, :

• /,
• (, , , ..)
• ( touch/mouse, )