i have tried using ng-disabled in div tag, but it is not working. does ng-disabled will work on div tags? if yes then how?

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

i have tried using ng-disabled in div tag, but it is not working. does ng-disabled will work on div tags? if yes then how?

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

• javascript
• html
• angularjs

5 Answers 5

"ng-disabled" just adds or removes the "disabled" attribute on the element. However in HTML "disabled" on a div has no effect at all.

So in a way "ng-disabled" is working, but it just does not make sense to use it on a div.

You can add "ng-disabled" to a fieldset though which will make input elements nested in it appear disabled.

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

there is a number of elements in HTML that takes the 'disabled' attribute in effect, DIV is not one of them.

you can see what elements take that attribute, here

these elements accept the 'disabled' attr:

• button
• input
• select
• textarea
• optgroup
• option
• fieldset

you can use the next directive:

//***********************************// //this directive is ng-disabled directive for all elements and not only for 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 the html:

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

The usage of 'ng-disabled', as the dev guide of angular says, is only for an input tag.

<INPUT ng-disabled="">
 ...
</INPUT>

So from what I gather, you are trying to disable the div when the button is pushed? Otherwise you can just disable the button like this.

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

But I don't understand why because it cannot be enabled again.