attendere che l'applicazione angolare sia completamente renderizzata dallo script fantasma

Question

Sto scrivendo uno script che genera immagini PNG da ogni pagina del mio frontend. Sto usando angolare per l'interfaccia utente e catturando le pagine con il fantoccio.

La vista prendere un po 'fino a finitura angolare rendendolo così devo aspettare un po' prima della cattura:

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

Mi chiedo se ci sia un modo migliore per raggiungere questo obiettivo. Ho trovato angolare in grado di emettere un evento quando la pagina viene visualizzata completamente:

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

e ha trovato un modo per comunicare al fantasma con onCallback così ho potuto scrivere qualcosa di simile:

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

Poi in altro luogo sceneggiatura fantasma:

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

Ma mi sono perso in come iniettare angolare $viewContentLoaded maniglia dallo script fantasma.

Non so se evaluate/evalueateAsyn sono la strada da percorrere ...

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

Forse ho potuto accedere il diritto $scope in qualche modo. Qualche idea?

Answer 1

L'API PhantomJS associata è onCallback; puoi 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/'); 

È possibile ottenere l'accesso al $rootScope accedendo l'iniettore; per esempio, se stai usando la direttiva ng-app, puoi trovare l'elemento con la direttiva e chiamare .injector().get("$rootScope") su di esso. Tuttavia, non sono sicuro che l'evento $viewContentLoaded sia già stato attivato.