Angular 1.2 Iframe ng-src not updating pdf

我正在从输入html中抓住pdf文件，并试图使用html5文件API使其显示，我能够委托。：

这是我的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);
 }
}

输入文件的 onchange事件不是角度事件，您可以轻松地看到在事件处理程序中必须获得范围的工作。

因此，在此事件期间，Angular不会是对模型进行更改的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(...)
    }
]);

相关内容

最新更新

热门标签：