3

下面的jsfiddle

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

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

就像是：

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

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

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

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

4

1 回答 1

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

于 2013-08-11T17:08:08.117 回答