问题描述
我在写这从我的前端的每一页生成PNG图像的脚本。
我采用了棱角分明的UI和幻影捕获页面。
I'm writing a script which generates png images from every page of my frontend.I'm using angular for the UI and capturing the pages with phantom.
该视图需要一段时间,直到完成角渲染它,所以我不得不等待的一点点的捕捉前:
The view take a while until angular finish rendering it so I have to 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 is a better way to achieve this. I found angular can emit an event when the page is fully rendered:
$scope.$on('$viewContentLoaded', function () {
// do something
});
和发现沟通与幻影 onCallback
,所以我可以写东西喜欢的方式:
And found a way for communicate to phantom with onCallback
so I could write something 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();
};
但我在如何注入角丢失 $ viewContentLoaded
从幽灵脚本处理。
我不知道,如果评估
/ evalueateAsyn
是要走的路...
I don't know if evaluate
/evalueateAsyn
are the way to go ...
page.evaluateAsync(function () {
$scope.$on('$viewContentLoaded', function () {
window.callPhantom({ hello: 'world' });
});
});
也许我可以以某种方式访问正确的 $范围
。
任何想法?
Maybe I could access the right $scope
in some way.Any ideas?
推荐答案
相关的PhantomJS API是 onCallback
;您可以中的API文档。
The associated PhantomJS API is onCallback
; you can 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-应用
指令,你可以找到该指令和呼叫 .injector()的元素。得到( $ rootScope)
就可以了。不过,我不知道,如果 $ viewContentLoaded
活动将已经被然后开枪。
You can get access to the $rootScope
by accessing the injector; for example, if you're using the ng-app
directive, you can find the element with the directive and call .injector().get("$rootScope")
on it. However, I'm not sure if the $viewContentLoaded
event will already have fired by then.
这篇关于等待角度应用从幻象脚本完全呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!