angularjs - 等待 Angular 应用程序从幻像脚本中完全呈现

Question

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

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

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();
};

但是我迷失了如何注入(inject) Angular $viewContentLoaded来自幻影脚本的句柄。

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

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

也许我可以访问正确的$scope某种程度上来说。
有任何想法吗？

Answer 1

关联的 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通过访问注入(inject)器；例如，如果您使用 ng-app指令，您可以找到带有指令的元素并调用 .injector().get("$rootScope")在上面。但是，我不确定 $viewContentLoaded到那时，事件已经被触发了。