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;你可以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-app指令，则可以找到带有指令的元素并在其上调用.injector().get("$rootScope")。但是，我不确定那时$viewContentLoaded事件是否已经被解雇了。

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

1 个答案: