angularjs - wait for angular app to be fully rendered from phantom script -

i'm writing script generates png images every page of frontend. i'm using angular ui , capturing pages phantom.

the view take while until angular finish rendering have wait a little before capturing:

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

i wonder if there better way achieve this. found angular can emit event when page rendered:

$scope.$on('$viewcontentloaded', function () {   // }); 

and found way communicate phantom oncallback write like:

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

then in other place in phantom script:

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

but i'm lost in how inject angular $viewcontentloaded handle phantom script.

i don't know if evaluate/evalueateasyn way go ...

page.evaluateasync(function () {   $scope.$on('$viewcontentloaded', function () {     window.callphantom({ hello: 'world' });   }); }); 

maybe access right $scope in way. ideas?

the associated phantomjs api oncallback; can find api doc on wiki.

// in angular $scope.$on('$viewcontentloaded', function () {   window.callphantom(); });  // in phantomjs script var page = require('webpage').create(); page.oncallback = function() {   page.render('snapshot.png');   phantom.exit(); }; page.open('http://localhost:9000/'); 

you can access $rootscope accessing injector; example, if you're using ng-app directive, can find element directive , call .injector().get("$rootscope") on it. however, i'm not sure if $viewcontentloaded event have fired then.