我正在写一个脚本,从我的前端的每一页生成png图像.
我使用角度为UI和捕获页面与幻影.
我使用角度为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句柄.
我不知道评估/评估Asyn是否要去…
page.evaluateAsync(function () {
$scope.$on('$viewContentLoaded',function () {
window.callPhantom({ hello: 'world' });
});
});
也许我可以以某种方式访问正确的$范围.
有任何想法吗？
相关联的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事件是否已经被触发了.
