CODEWITHSUNDEEP
angularjsangularjs-directive
MRP
MRP

Reputation: 609

Disable all child elements using angularjs directive

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 ?

Upvotes: 1

Views: 5729

Answers (2)

harishr
harishr

Reputation: 18065

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.

Upvotes: 7

Sander Elias
Sander Elias

Reputation: 754

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 ;)

Upvotes: 2

Related Questions