Angular 1.2 Iframe ng-src 未更新 pdf答案

【问题标题】：Angular 1.2 Iframe ng-src not updating pdfAngular 1.2 Iframe ng-src 未更新 pdf
【发布时间】：2017-05-06 11:26:12
【问题描述】：

我正在从输入 html 中获取一个 PDF 文件并尝试使用 HTML5 File API 使其显示，我可以 console.log 文件 url 但它没有显示在我的 iframe 中：

这是我的html：

<html ng-app="PDFReaderApp">
<head>
<title> Automatically get your GPA from submitting in your transcript pdf file </title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="./pdf.js" ></script>
<script src="./app.js" ></script>
<script src="./controllers.js"></script>

<style>
iframe {
  height: 500px;
  width: 400px;
  margin: 2em;
}
</style>
</head>
<body ng-controller="TranscriptReaderCtrl">

 <input id="inputPDF" type="file" accept="application/pdf" onchange="angular.element(this).scope().getPDF(this.files)" />
 <div id="display">
  <iframe id="viewer" ng-src="{{fileUrl}}" ></iframe>
 </div>
</body>
</html>

和我的 angularjs 控制器代码：

function TranscriptReaderCtrl($http, $scope, $window, $sce) {
 $scope.uploadedPDF = "";
 $scope.fileUrl = "";

 $scope.getPDF = function(files) {
    var fileUrl = $window.URL.createObjectURL(files[0]);
    console.log(fileUrl);
    $scope.fileUrl = $sce.trustAsResourceUrl(fileUrl);
    console.log($scope.fileUrl);
 }
}

【问题讨论】：

在您的活动完成后运行摘要循环，read this answer 了解更多信息
谢谢，我试过了，但现在我只有一个显示空白文件的 iframe：资源解释为文档，但使用 MIME 类型应用程序/pdf 传输：“blob:null/5e8fac22-159b-4338 -935f-ff32b9ff5cb4"

标签： javascript angularjs html iframe

【解决方案1】：

输入文件的onchange 事件不是角度事件，您可以通过在事件处理程序中获取范围的工作轻松地看到这一点。

因此，角度不会是 aware 在此事件期间对模型所做的更改。

要强制它刷新视图并影响模型更改，您必须通过在 getPDF 函数末尾调用 $scope.$apply() 来运行摘要循环。

关于加载错误，你肯定要把blob://添加到angular url白名单中：

var app = angular.module( 'myApp', [] )
.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|blob):/);
        // Angular before v1.2 uses     $compileProvider.urlSanitizationWhitelist(...)
    }
]);

【讨论】：