3

以下のjsfiddle

私が取り組んでいるプロジェクトでは、2 つの個別の「アプリ」を並べて表示する必要があります。を使用しangular.bootstrapて、複数の「アプリ」を手動で初期化できます。ユースケースは次のとおりです。

  1. appOne を手動で初期化します。 angular.bootstrap($('#one'),['one']);
  2. 私はいくつかの情報を入力します
  3. コントローラー「one」内で、「appTwo」を手動で初期化します

  4. appOne がバインドされている DOM 要素を非表示にするために、初期化終了イベントをキャッチしたいと考えています。私のシナリオでは、init プロセスに時間がかかる場合があります。

何かのようなもの：

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

「終了」イベントの意味によって異なります。2 番目のアプリ モジュールの初期化が完了した瞬間ですか、それとも 2 番目のモジュールの「ホーム コントローラー」がビューのレンダリングを完了した瞬間ですか。前者の場合は、2 番目のモジュールの実行ブロックを使用できます。

モジュールのドキュメントから:

実行ブロック - インジェクターが作成された後に実行されます ...

したがって、あなたの場合、.run2番目のモジュールにブロックを設定して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 に答える