angularjsangularjs-directiveangularjs-components

angularjs html component configuration


I am implementing a simple grid component in angularjs. I prefer html configuration over javascript because that way view code and logic code is separated.

For example,

<my-grid> 
     <my-column title="Name" field"name"></column>
     <my-column title="Age" field"age"></column>
 </my-grid>

I have created a my-column component that requires a my-grid component. When the controller is initialized it inspects the element and calls addColumn function of my-grid.

I need to properly initialize all my-column before finally building the grid. Is there any hook after all nested controllers are initialized ($onInit function is called) ?

If not should I change my design what is the angularjs appropriate design ?


Solution

  • In the end, I used scipper's recommendation with a little tweak.

    The my-grid is initially on Initializing state.

    Each sub component (for example my-column) in each $onInit notifies my-grid of it's presence and my-grid increments a counter.

    When a sub component is finished or fails notifies again my-grid with the result and the counter is decremented.

    When this counter reaches zero, all sub components are initialized. This is checked both on $postLink and whenever a sub component is finishes. The $postLink is required in case there are no sub components at all.

    While the grid is initializing, a nice loading bar is displayed.