CODEWITHSUNDEEP
javascripthtmlangularjs
Simon
Simon

Reputation: 296

Run Javascript after DOM change

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:

Upvotes: 0

Views: 1337

Answers (1)

Chris Lonardo
Chris Lonardo

Reputation: 141

Use event handlers. On making the change:

$rootScope.$broadcast("updateLayout");

And for the listener:

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

Upvotes: 1

Related Questions