Run Javascript after DOM change

Question

I've written two custom directives.

Their names are app-content and app-content-item. They are supposed to be used within some forthcoming projects to give those projects a basic scaffold with basic styling. They will be part of a module. They are supposed to be nested like this:

<app-content>
    <app-content-item>
        html...
    </app-content-item>
    <app-content-item>
        html...
    </app-content-item>
    .
    .
<app-content>

Within the link function of app-content I'm calling a method that searches the directives children for app-content-item-tags und sets the width and height of this elements using a specific algorithm and the available space within the app-content-container.

As for as I know, the desired layout can not be achieved with css only. There has to be some javascript involved.

Right now I'm unsing the angular $timeout-service with no delay given to invoke the function after the directive rendered. This code-snippet is taken from the app-content directives link function:

$timeout(function(){
    scaleLayout();
});

This works fine so far.

The problem is, that the app-content-item-containers will be filled by the app using my component. That means the contents of the app-content-item-containers could change at any time. If they change, the scaleLayout() function has to be invoked again.

I don't want the user of my component to be in charge of invoking the methode. The component should be a blackbox for the user as much as possible.

For the user of my component it should feel like this is done by css, so he doesn't have to worry about it.

So far I've tried the following approaches:

DOMSubtreeModified-Event (gets triggered too often and causes the app to crash)
Setting a watcher on the elements html (triggerd too soon)

is your app-content-item-container an object? you could detect the change event or force the user to call a 'container.add' function then use that function to trigger the change event. — softwarenewbie7331
– softwarenewbie7331, Commented Jul 20, 2015 at 7:13

Chris Lonardo · Accepted Answer · 2015-07-20 06:42:16Z

1

Use event handlers. On making the change:

$rootScope.$broadcast("updateLayout");

And for the listener:

$scope.$on('updateLayout', function () {
       //layout stuff here
    });

answered Jul 20, 2015 at 6:42

Chris Lonardo

1413 bronze badges

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

3 Comments

Simon Over a year ago

But this way the broadcasting of the event has to be done by the developer using my component. This would be my plan b. But I'm really trying to keep the user of my component out of this...

Chris Lonardo Over a year ago

If I'm understanding correctly- when you're designing the API for your component, this should be able to be something you can build in so it's transparent to the user. You're talking about something that's inherently event-driven, so why not run it when the app-content-item-containers populate? Otherwise, if you're using promises on the filling of the containers, you could chain the layout stuff to their completion.

Simon Over a year ago

The app using my component can add content to the app-content-items at any time. For example: the app could load data from a rest-webservice at initial load and embed this data into the app-content-items via some ng-repeat. At this point the app-content-item is already populated and the layout-script has to run again.

Collectives™ on Stack Overflow

Run Javascript after DOM change

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related