設定時にAngularJSがrootScope変数を取得する

Question

私が作業しているプロジェクトではeventsという$rootScopeの変数があります。コントローラに注入した後、コントローラで$rootScope.eventsを使ってこれにアクセスできます。

サービスで$rootScope変数にイベントが設定されるまでに時間がかかることがあります。次に、変数の最初のイベントからIDを必要とする新しい機能を追加します。問題は、$rootScope.eventsが設定される前に呼び出されていることです。私は$rootscope.eventsが設定された後、私のコントローラでメソッドを呼び出す方法を理解できません。以前は$watchを使用していましたが、この変数では動作しないようです。コードは、私が試した：

$scope.$watch('$rootScope.events', function() { 
    if ($rootScope.events.length > 0) { 
     getDetails(); // function I want to call after $rootscope.events is set 
     $log.debug($rootScope.events); // debugging line 
    } 
}); 

を、私はそれが無限ループになってきた避けるために$rootScope.events.length > 0を追加しました。これが必要かどうか確かめないでください。この機能を追加するためのソリューションはありますか？この時計のようなもの？または私は何か間違ったことをしましたか？

私はちょうど私のコントローラで$scopeと$rootScopeを注入し、その後$log.debug()セット変数で呼び出さなければならないとして、私はこの記事に追加したあなたはより多くのコードを必要としないと思います。現在、空の変数を返します。私が間違っている場合は、コメントに私に知らせてください。

Answer 1

それはしばらくして、私はあなたがこれをしたいと考えています：

$rootScope.$watch('events', function() { 
    if ($rootScope.events.length > 0) { 
     getDetails(); // function I want to call after $rootscope.events is set 
     $log.debug($rootScope.events); // debugging line 
    } 
}); 

eventsは$rootscope上の値であるが、$rootscope.eventsは$scope上ない値です。時計と$rootscopeの混乱を避けるために

、しかし、あなたはおそらく使用する必要があります。

$scope.$watch('$root.events', function() { 
    var events = $scope.$root.events; 
    if (events.length > 0) { 
     getDetails(); // function I want to call after events is set 
     $log.debug(events); // debugging line 
    } 
}); 

それとも単に：

$scope.$watch('$root.events', function(newValue, oldValue) { 
    if (newValue.length > 0) { 
     getDetails(); // function I want to call after events is set 
     $log.debug(newValue); // debugging line 
    } 
}); 

Answer 2

RootScope documentation

時計の文字列（スコープ変数）または機能にあります。

$scope.$watch(function() { 
    return $rootScope.events; 
}, function() { 
    console.log($rootScope.events); 
}, true); 

Answer 3

代わりに一度起こる何かのために時計を置くこと、あなたが使用することができますイベントが準備されると、あなたのイベントサービスが解決することを約束します。

Event Service : ($rootScope & $q injected) 
    // in constructor : 
    this.deferred = $q.defer(); 
    $rootScope.eventPromise = deferred.promise; 


    // in a setup fonction or even within the constructor 
    setupEvent : function(){ 
     .. doing some stuff .. 
     .. somewhere in a asynchronous call back : 
      $rootScope.events =... //setup events 
      this.deferred.resolve();// or me.deferred using var me=this if some closure trouble 

     .. somewhere else if it fails .. 
      this.deferred.reject(); 
    } 

今度は、任意のコントローラがロードされる前に、これが実行されることを確認してみましょう：

angular.run(['EventService', function(EventService){ 
    // if you do everything in the constructor let the angular.run and don't run any code, 
    // this will make sure your events will start loading before angular will resolve the current routes. 
    EventService.setupEvent(); 
}]); 

今度はそれを使ってみましょう：

$rootScope.eventPromise.then(function(){ 
    $rootScope.events // we're safe here. 
});