AngularJS 等到元素完全加载答案

【问题标题】：AngularJS wait until element is fully loadedAngularJS 等到元素完全加载
【发布时间】：2019-01-23 23:58:48
【问题描述】：

我目前正在研究 pdftron 实现，当 webviwer 尝试加载文档时，看起来 webviewer 的加载速度不够快。您将如何设置某种就绪元素，使其等到 webViewer 准备好加载文档？。

    viewer = new PDFTron.WebViewer({
        path: 'WebViewer',
        type: 'html5',
        documentType: 'pdf'
    }, element);

    $scope.watch('url', function(blobVal) {
      viewer.loadDocument(blobVal);
    }

我在 viewer.loadDocument 上得到一个未定义的结果，这是因为查看器没有完全加载。它间歇性地发生。

【问题讨论】：

标签： angularjs angular-directive pdftron

【解决方案1】：

您想等待 WebViever 就绪事件。请参阅以下指南： https://www.pdftron.com/documentation/web/guides/fundamentals/webviewer#details-of-instantiation

var myWebViewer = new PDFTron.WebViewer({
  initialDoc: 'mydoc.pdf',
  ui: 'legacy'
}, viewerElement);

viewerElement.addEventListener('ready', function() {
  // API functions are now ready to be called on myWebViewer
});

另请参阅以下链接： https://www.pdftron.com/api/web/PDFTron.WebViewer.html#event:ready__anchor

【讨论】：

【解决方案2】：

我相信下面的代码更有意义

   $scope.viewer = new PDFTron.WebViewer({
        path: 'WebViewer',
        type: 'html5',
        documentType: 'pdf'
    }, element);

    $scope.$watch('viewer', function(newVal, oldVal) {
      if (newVal instanceof Blob && newWal !== oldVal) {
        viewer.loadDocument(newVal);
      }
    }

【讨论】：

问题是我还需要注意 url，因为当 url 字段更改时，它会加载一个新文档。我明白你关于观看观众的意思，但是网址呢，我需要两块手表吗？
@jedgard 我更新了答案，只是添加了检查newVal !== oldVal
这个答案的问题是，即使在 $watch 回调被触发后，查看器可能仍然没有加载/准备好。所以调用 viewer.loadDocument 仍然可能引发异常。不确定 $watch 做了什么，但至少您还需要收听 WebViewer 就绪事件。请参阅@Yasser 答案。

【解决方案3】：

您可以使用 javascript 超时。

setTimeout(function(){
       // You can write functions that will load after Angular elements.
},500);

【讨论】：

应该等待一个事件，而不是硬编码超时。潜在地，比如糟糕的延迟和非常慢/繁忙的设备，您可能会超过超时时间，因此仍然会发生随机错误。这只是降低了它的可能性，代价是任意/不必要的等待时间。