CODEWITHSUNDEEP
javascripthtmlangularjs
Balu
Balu

Reputation: 99

Does ng-disabled work in div tag? if no, then why?

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>

Upvotes: 9

Views: 22640

Answers (5)

Lax
Lax

Reputation: 1167

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>

Upvotes: 4

EternalHour
EternalHour

Reputation: 8621

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.

Upvotes: 1

DebbieMiller
DebbieMiller

Reputation: 452

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

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

Upvotes: 1

Nitsan Baleli
Nitsan Baleli

Reputation: 5458

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

Upvotes: 5

eekboom
eekboom

Reputation: 5802

"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/

Upvotes: 8

Related Questions