AngularJS：初期化イベントをカスタマイズする

AngularJSが何であるかを既に知っていて、長い間使用している場合は、おそらく、アプリケーションの初期化直後に特定のアクションを実行するタスクがすでにあるはずです。 そして、ドキュメントを読んだ後、「箱から出して」そのような方法がないことがわかります）



もちろん、多くの人は各モジュール内のrun（）メソッドを覚えているでしょう。 ただし、アプリケーションを初期化する前にこのメソッドが機能することをお答えします。 より正確には、インジェクターがすべてのモジュールをロードした後、それらが完了する前。 これは簡単に確認できます。

angular.module("use", []) .config([function(){ console.log("::use::config"); }]) .run([function(){ console.log("::use::run"); }]) .controller("BarCtrl", ["$scope", function($scope){ console.log("::use::ctrl::BarCtrl"); $scope.foo = "bar"; }]) ;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記のコードはコンソールに出力されます：

 ::use::config ::use::run ::use::ctrl::BarCtrl
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

生きている例。



それでも、初期化についてアプリケーションに通知する方法があります。 angular.bootstrapメソッドはこれに役立ちます。 このメソッドを使用すると、 ng-appディレクティブを使用せずにモジュールをDOM要素にアタッチできます。 モジュールをアタッチして、その中のすべての要素を処理した後、 インジェクターからモジュールの$ rootScopeへのリンクを取得し、すべての子要素に通知できます。 AngularJSには、 $ emitと$ broadcastの 2つのイベント処理メソッドがあります。 1番目と2番目の違いは、「アップ」して動作し、親ハンドラーによって停止できることです。 一般に、DOMイベントの直接的な類似物。 2番目のものは「ダウン」を通知し、停止できません。 両方のメソッドは、現在のスコープで始まります。



したがって、すべての引数を要約し、このコードの一部をすでに示してみましょう。

 angular.element(document).ready(function(){ var $inj = angular.bootstrap(document.body, ['use']); var $rootScope = $inj.get("$rootScope"); $rootScope.$broadcast("init", "hello"); $rootScope.$digest(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

生きている例



AngularJSのコンテキスト外にいるため、内部で$ digest（）ループを自分で実行する必要があります。 上記のリンクの例のコンソールからわかるように、イベントはモジュールのすべてのコンポーネントが動作した後に正確に発生します。 実際、これは必須でした。