angularjs - angular.bootstrap : How to catch initialization end event?

Question

jsfiddle 下面

对于我正在进行的项目，我需要 2 个独立的“应用程序”来并排运行。使用 angular.bootstrap 我可以手动初始化多个“应用程序”。用例如下:

1. 我手动初始化 appOne:angular.bootstrap($('#one'),['one']);
2. 我输入一些信息
3. 在 Controller “one”中，我手动初始化“appTwo”
4. 我想捕捉结束初始化事件来隐藏DOM
   元素 appOne 绑定(bind)到。在我的场景中，初始化过程可能需要一些时间。

类似于:

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

当 ng-cloak 在该点执行时，“结束”事件必须存在于幕后(我猜是这样)。

angular.bootstrap 没有为此目的提供回调。您知道实现该目标的任何方法吗？

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

Answer 1

这取决于您所说的“结束”事件的含义。是第二个应用程序模块完成初始化的时刻，还是第二个模块的“家庭 Controller ”完成渲染其 View 的时刻。如果是前者，则可以使用第二个模块的运行 block 。

来自模块文档:

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

所以，在你的情况下，你可以在第二个模块上有一个 .run block 来在 window 全局范围内设置一些变量，你可以为该变量设置一个监听器在第一个模块中。所以本质上，您将使用 window 对象在模块之间共享数据。

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