Disable all child elements using angularjs directive

Question

I have created a directive that disable all of the selected child elements like this :

app.directive('noeDisable', function () {
        var linkFunction = function (scope, element, attributes) {
            scope.text = attributes["=noeDisable"];
            if (scope.text == 'true') {
                $(element).find('input,button,a').attr("disabled", true);
            }
        };
        return {
            link: linkFunction

        };
    });

and it work well for this example: <div noe-disable="true"> ... </div>. but the problem is some of the child elements load later, for example after ajax call or when I have another angularjs directive inside parent element that add some child elements to its parent, so they wont be disabled !!! How can I deal with this problem ?

Nice question. Are you targeting old browsers? There are serveral solutions to this, but the nicest ones are ever-green only. — Sander Elias
– Sander Elias, Commented Oct 6, 2014 at 5:36
@SanderElias I use modern browsers like google chrome version 37 — MRP
– MRP, Commented Oct 6, 2014 at 5:38
Good! you can use an mutationObsever then. One question left, The thing you add to your directive, are those direct children to this directive, or is there a (number of) layers in between? — Sander Elias
– Sander Elias, Commented Oct 6, 2014 at 5:42
Add $watch on the variable that gets updated after the ajax call and execute the disable routine. — Arun Ghosh
– Arun Ghosh, Commented Oct 6, 2014 at 5:45
you can use fieldset to disable all child fields in that fieldset — harishr
– harishr, Commented Apr 13, 2015 at 9:38

harishr · Accepted Answer · 2015-04-15 04:01:36Z

7

you can use fieldset.

Wrap all your fields in fieldset and use ng-disabled like:

<fieldset ng-disabled="shouldDisabled"> 
         ... inputs ...
</fieldset>

It will automatically disable all inputs inside the fieldset.

answered Apr 15, 2015 at 4:01

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2227400 Over a year ago

that's an elegant solution :)

ChrisFletcher Over a year ago

Doesn't work on IE, works on Edge but no version of IE

Wilmer SH Over a year ago

However, while it works for angular material inputs it does not work for angular material buttons.

Yomi1984 Over a year ago

<fieldset [disabed]="myConditoin"> ... worked for me

Jacob Stamm Over a year ago

@Yomi1984 That's because you're using Angular 2+

Sander Elias · Accepted Answer · 2014-10-06 06:44:52Z

2

Had a spare (couple off) minutes!

Here is the plunk showcasing the mutationObserver.

the crux is in this line:

observer.observe(element[0], config);

witch subscribe to all the dom updates of the element. I ditched the dependency on jQuery, while I was at it ;)

answered Oct 6, 2014 at 6:44

Sander Elias

7546 silver badges9 bronze badges

Collectives™ on Stack Overflow

Disable all child elements using angularjs directive

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related