12

我正在编写一个脚本，它从我前端的每一页生成 png 图像。我正在为 UI 使用 Angular 并使用幻像捕获页面。

该视图需要一段时间才能完成渲染，因此我必须稍等片刻才能捕获：

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

我想知道是否有更好的方法来实现这一点。我发现 angular 可以在页面完全呈现时发出一个事件：

$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从幻影脚本中注入角度句柄。

我不知道是否evaluate/evalueateAsyn是要走的路...

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

也许我可以通过$scope某种方式访问​​该权利。有任何想法吗？

4

1 回答 1

9

相关的 PhantomJS API 是onCallback；您可以在 wiki 上找到 API 文档。

// 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到那时该事件是否已经触发。

于 2013-09-04T03:59:42.637 回答