1

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 ?

10
  • 1
    Nice question. Are you targeting old browsers? There are serveral solutions to this, but the nicest ones are ever-green only. Oct 6, 2014 at 5:36
  • @SanderElias I use modern browsers like google chrome version 37
    – MRP
    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? 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
    Oct 6, 2014 at 5:45
  • 1
    you can use fieldset to disable all child fields in that fieldset
    – harishr
    Apr 13, 2015 at 9:38

2 Answers 2

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.

5
  • that's an elegant solution :)
    – user2227400
    Dec 18, 2015 at 11:08
  • Doesn't work on IE, works on Edge but no version of IE Jan 28, 2016 at 13:31
  • However, while it works for angular material inputs it does not work for angular material buttons.
    – Wilmer SH
    May 31, 2017 at 20:20
  • <fieldset [disabed]="myConditoin"> ... worked for me
    – Yomi1984
    Mar 30, 2020 at 10:33
  • @Yomi1984 That's because you're using Angular 2+ Apr 29, 2021 at 20:22
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 ;)

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.