ファントムスクリプトから角度アプリが完全にレンダリングされるのを待つ

Question

私のフロントエンドのすべてのページからpng画像を生成するスクリプトを書いています。 私はUIのための角度を使用して、ファントムでページをキャプチャしています。角度の仕上げはそれをレンダリングするまで

ビューはので、私はキャプチャする前少しを待たなければならない時間がかかる：

var page = require('webpage').create(); 
page.open('http://localhost:9000/', function() { 
    window.setTimeout(function() { 
    page.render('snapshot.png'); 
    phantom.exit(); 
    }, 2000); 
}); 

私はこれを達成するためのより良い方法があるかどうだろうか。

$scope.$on('$viewContentLoaded', function() { 
    // do something 
}); 

そしてonCallbackとファントムと通信のための方法を見つけたので、私のようなもの記述することができます：私は、ページが完全にレンダリングされたときの角度がイベントを発することができる見つけ内の他の場所に続いて

$scope.$on('$viewContentLoaded', function() { 
    window.callPhantom({ hello: 'world' }); 
}); 

をファントムスクリプト：

page.onCallback = function() { 
    page.render('snapshot.png'); 
    phantom.exit(); 
}; 

しかし、私はファントムスクリプトから角度$viewContentLoadedハンドルを注入する方法で迷ってしまいました。

evaluate/evalueateAsynが移動するための方法であれば、私は知らない...

page.evaluateAsync(function() { 
    $scope.$on('$viewContentLoaded', function() { 
    window.callPhantom({ hello: 'world' }); 
    }); 
}); 

は、たぶん私はいくつかの方法で、右$scopeにアクセスすることができました。 アイデア

Answer 1

関連するPhantomJS APIはonCallbackです。あなたはfind the API doc on the wikiすることができます。

// in angular 
$scope.$on('$viewContentLoaded', function() { 
    window.callPhantom(); 
}); 

// in the phantomjs script 
var page = require('webpage').create(); 
page.onCallback = function() { 
    page.render('snapshot.png'); 
    phantom.exit(); 
}; 
page.open('http://localhost:9000/'); 

あなたは、インジェクタにアクセスすることで$rootScopeへのアクセスを得ることができます。たとえば、ng-appディレクティブを使用している場合は、ディレクティブでその要素を見つけて.injector().get("$rootScope")を呼び出します。しかし、私は$viewContentLoadedイベントがすでにそれによって解雇されているかどうかはわかりません。