angular.bootstrap:如何捕获初始化结束事件?

时间:2013-08-11 14:33:14

标签: angularjs

jsfiddle

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

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

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

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

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

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

1 个答案:

答案 0 :(得分:2)

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

来自模块文档:

  

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

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