Does ng-disabled work in a div tag? if not, why?

I tried using ng-disabled in the div tag, but it does not work. Will ng-disabled work on div tags? if so, how?

<div ng-disabled="true"> <button>bbb</button> </div> 
+7
javascript html angularjs
source share
5 answers

ng-disabled simply adds or removes the disabled attribute for an element. However, in HTML "disabled" on the div there is no effect.

Thus, "ng-disabled" works, but it just doesn't make sense to use it in a div.

You can add "ng-disabled" to the set of fields, although this will cause the input elements nested in it to be disabled.

Another workaround would be to simulate a disabled effect using the css properties "opacity" and "pointer-events: none", see http://nerd.vasilis.nl/disable-html-elements-with-css-only/

+7
source share

HTML has several elements that use the "disabled" attribute; the DIV is not one of them.

you can see which elements accept this attribute, here

these elements accept a "disabled" attr:

  • Button
  • input
  • select
  • text field
  • OPTGROUP
  • options
  • FIELDSET
+3
source share

you can use the following directive:

// ************************************* // // this directive is an ng-disabled directive for everyone elements, not just for the button // ************************************* //

 app.directive('disabledElement', function () { return { restrict: 'A', scope: { disabled: '@' }, link: function (scope, element, attrs) { scope.$parent.$watch(attrs.disabledElement, function (newVal) { if (newVal) $(element).css('pointerEvents', 'none'); else $(element).css('pointerEvents', 'all'); }); } } }); 

and html:

  <div ng-click="PreviewMobile()" data-disabled-element="toolbar_lock"></div> 
+3
source share

The use of 'ng-disabled', as indicated in the dev angular manual, applies only to the input tag.

 <INPUT ng-disabled=""> ... </INPUT> 
+1
source share

So, from what I'm compiling, are you trying to disable the div when the button is pressed? Otherwise, you can simply disable this button.

 <div> <button ng-disabled="true">bbb</button> </div> 

But I do not understand why, because it cannot be turned on again.

+1
source share

All Articles