等待角度应用程序从幻像脚本完全呈现

Question

我正在写一个脚本,它从我的前端的每一页生成png图像.我正在使用角度来设置UI并使用幻像捕获页面.

视图需要一段时间,直到角度完成呈现它,所以我必须等待一段时间才能捕获:

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某种方式访问权限.有任何想法吗？

Answer 1

相关的PhantomJS API是onCallback; 你可以在维基上找到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那时候事件是否已经被解雇了.