angular.bootstrap: How to catch initialization end event?

Question

jsfiddle below

For a project I'm working on, I need 2 separate "app" to live side-by-side. Using angular.bootstrap I can initialize manually multiple "app". The use case is as follow:

1. I initialize appOne manually: angular.bootstrap($('#one'),['one']);
2. I enter some info
3. Inside controller "one", I initialize "appTwo" manually
4. I want to catch the end initialization event to hide the DOM
   element appOne is bound to. In my scenario, the init process may take some time.

Something like:

angular.bootstrap($('#two'),['two']).end(function() {
        $scope.hide = true; //oneApp will be hidden
});

That "end" event must exist behind the scene as ng-cloak executes at that point (I guess so).

angular.bootstrap provides no callback for that purpose. Do you know any way to achieve that?

http://jsfiddle.net/Ep48L/3/

Answer 1

It depends from what you mean by "end" event. Is it the moment the second app module is finished initialising or is it the moment when second module's "home controller" is done with rendering it's view. If it's the former than you can use the second module's run block.

From the Module docs:

Run blocks - get executed after the injector is created ...

So, in your case, you could have a .run block on second module to set some variable on window global scope and you could set a listener for that variable in first module. So in essence, you would be using window object to share data between modules.

HTML:

<div id="one" ng-cloak ng-controller="oneCtrl" ng-hide="hide">
    <input type="text" ng-model="path" placeholder="here..." />
    <button ng-click="save()">save</button>
    <button ng-click="two()">two()</button>
</div>
<hr/>
<div id="two" ng-cloak ng-controller="twoCtrl">
    <span>{{path}}</span>
</div>

angular
    .module('oneApp', [])
    .controller('oneCtrl', function($scope, $window) {
        $scope.hide = false;
        $scope.two = function() {
            angular.bootstrap($('#two'),['twoApp']);
        };

        $scope.$watch(function(){
            return $window.twoAppIsSet;
        }, function(twoAppIsSet){
            $scope.hide = twoAppIsSet;
        });
    });

angular
    .module('twoApp', [])
    .controller('twoCtrl', function($scope) {
        $scope.path = window._path; 
    })
    .run(function($window){
        $window.twoAppIsSet = true;
    });

angular.element(document).ready(function() {
    angular.bootstrap($('#one'), ['oneApp']);  
});

FIDDLE