等待角度应用从幻象脚本完全呈现 [英] wait for angular app to be fully rendered from phantom script

问题描述

我在写这从我的前端的每一页生成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.

这篇关于等待角度应用从幻象脚本完全呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！