warten, bis angular app vollständig von Phantomskript gerendert wird

Question

Ich schreibe ein Skript, das PNG-Bilder von jeder Seite meines Frontends erzeugt. Ich benutze eckig für die Benutzeroberfläche und erfassen die Seiten mit Phantom.

Der Blick eine Weile dauern, bis Winkel Finish es so zu machen ich ein wenig vor der Aufnahme warten müssen:

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

Ich frage mich, ob es einen besseren Weg, dies zu erreichen ist. Ich fand Winkel kann ein Ereignis ausgegeben wird, wenn die Seite vollständig wiedergegeben wird:

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

Und einen Weg gefunden, um mit onCallback Phantomen kommunizieren, so konnte ich so etwas schreiben:

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

Dann in anderem Ort in Phantom Skript:

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

Aber ich bin verloren, wie die Winkel $viewContentLoaded Griff aus dem Phantom-Skript zu injizieren.

Ich weiß nicht, ob evaluate/evalueateAsyn der Weg zu gehen ...

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

Vielleicht könnte ich die richtige $scope in irgendeiner Art und Weise zuzugreifen. Irgendwelche Ideen?

Answer 1

Die zugehörige PhantomJS API ist onCallback; Sie können 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/'); 

Sie Zugang zum $rootScope durch den Zugriff auf den Injektor bekommen kann; Wenn Sie beispielsweise die Anweisung ng-app verwenden, finden Sie das Element mit der Anweisung und rufen Sie .injector().get("$rootScope") darauf an. Ich bin mir jedoch nicht sicher, ob das Ereignis $viewContentLoaded bereits ausgelöst wurde.