angularjs – 等待角度的应用程序从幻影脚本完全渲染

发布时间：2020-12-17 09:27:29 所属栏目：安全来源：网络整理

导读：我正在写一个脚本,从我的前端的每一页生成png图像. 我使用角度为UI和捕获页面与幻影. 视图需要一段时间,直到角度完成渲染,所以我必须等待一点之前捕获： var page = require('webpage').create();page.open('http://localhost:9000/',function () { window.s

我正在写一个脚本,从我的前端的每一页生成png图像.
我使用角度为UI和捕获页面与幻影.

视图需要一段时间,直到角度完成渲染,所以我必须等待一点之前捕获：

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

我想知道是否有更好的方式来实现这一点.当页面完全呈现时,我发现角度可以发出一个事件：

$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句柄.

我不知道评估/评估Asyn是否要去…

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

也许我可以以某种方式访问??正确的$范围.
有任何想法吗？

相关联的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事件是否已经被触发了.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!