Question

jsfiddle

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

我手动初始化appOne： angular.bootstrap($('#one'),['one']);
我输入了一些信息
在控制器“one”内部，我手动初始化“appTwo”
我想抓住结束初始化事件来隐藏DOM 元素appOne必然会。在我的场景中，init进程可能需要一些时间。

类似的东西：

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

当“ng-cloak”执行时，场景后面必须存在“结束”事件（我猜是这样）。

angular.bootstrap没有为此目的提供回调。你知道有什么方法可以实现吗？

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

Answer 1

这取决于你对“结束”事件的意思。是第二个应用程序模块完成初始化的时刻，还是第二个模块的“家庭控制器”完成渲染视图的那一刻。如果它是前者，那么你可以使用第二个模块的运行块。

来自模块文档：

运行块 - 在创建注入器后执行...

因此，在您的情况下，您可以在第二个模块上有一个.run块来设置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

angular.bootstrap：如何捕获初始化结束事件？

1 个答案: