Search code examples
angularjscordovaonsen-ui

Wait to load Angularjs ng-controller until parent's controller is finished

I am developing an app with the following techs: cordova, angularjs, onsen-ui.

I am facing a problem and I would like to know your opinions to take the best approach to solve it.

I have a HTML files structure like this:

index.html:

<body ng-controller="EventCtrl">

    <ons-sliding-menu
          menu-page="menu.html" main-page="splash.html" side="left"
          var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
    </ons-sliding-menu>

</body>

menu.html

<ons-page ng-controller="MenuCtrl">
</ons-page>

In the EventController I do lot of async tasks like downloading content and initializing a database.

The problem comes when I want to load some data stored in the database from the MenuCtrl. The MenuCtrl starts to load before the database is initialize so is giving an error.

Is it possible to set the ng-controller attribute dinamically from the EventCtrl? How would you solve this problem?

Regards,

Solution

  • I found $broadcast angular service which fits my needs very well. I use it in the EventCtrl to broadcast a custom event once the database is loaded properly. Then in the MenuCtrl I set up a listener to this custom event and kick off the initial login from there.

    I used this link to understand how $broadcast service works:

    Todd Motto Blog

    Regards,