Question

我正在使用

<div ng-controller="DailyReportsController">
     <iframe ng-src="{{content}}" style="width:100%;height:100%;"></iframe>
</div>

在html页面中包含'pdf'文件。相应的控制器如下所示

mainApp.controller('DailyReportsController',
        ['$scope', '$state', '$rootScope', 'mainWebService', '$http', '$sce',
         function($scope, $state, $rootScope, mainWebService, $http, $sce) {

        angular.element(document).ready( function() {
                var drtab = new Royal_Tab($('.dailyrpts_tabs.royal_tab'));
                $scope.content =$sce.trustAsResourceUrl("https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf");

}
]);

但是跟随错误会引发

 TypeError: Cannot read property 'nodeName' of undefined
at La (http://localhost:8080/flipxl/scripts/angular.min.js:142:109)
at Object.Kb.$set (http://localhost:8080/flipxl/scripts/angular.min.js:65:380)
at Object.fn (http://localhost:8080/flipxl/scripts/angular.min.js:63:358)
at k.$digest (http://localhost:8080/flipxl/scripts/angular.min.js:109:172)
at k.$apply (http://localhost:8080/flipxl/scripts/angular.min.js:112:173)
at h (http://localhost:8080/flipxl/scripts/angular.min.js:72:454)
at w (http://localhost:8080/flipxl/scripts/angular.min.js:77:347)
at XMLHttpRequest.z.onreadystatechange (http://localhost:8080/flipxl/scripts/angular.min.js:78:420)

有任何解决方案请与我分享

Answer 1

由于$scope.$apply事件而导致ready添加mainApp.controller('DailyReportsController', ['$scope', '$state', '$rootScope', 'mainWebService', '$http', '$sce', function($scope, $rootScope, $http, $sce) { angular.element(document).ready( function() { //var drtab = new Royal_Tab($('.dailyrpts_tabs.royal_tab')); $scope.$apply(function() { $scope.content = $sce.trustAsResourceUrl("https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf"); }); }); }]);并修复缺失的大括号（DEMO，但遗憾的是，iframe在SO片段中似乎无法正常工作）。

虽然我无法重现您的错误。

{{1}}

Answer 2

您可以使用指令功能，如下所示。

var ngApp = angular.module("ngApp",[]);

ngApp.directive("pdfLoader",function(){

  return function(scope,elem,attr){
    elem.append("<object width='100%' height='100%' src='"+ scope.content +"'  type='application/pdf'></object>");
  };

});

ngApp.controller("ngCtrl",function($scope){

  $scope.content ="https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf"; 

});

和html如下

<div style="height:100%" pdf-loader></div>

在http://jsbin.com/quzoyiloke处查看运行示例，并在http://jsbin.com/quzoyiloke/3/edit?html,js处编写代码

您还可以尝试创建内容如下的新html文件。

＆＃13;

<html  ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<script type="text/javascript">


var myApp = angular.module('myApp',[]);

myApp.directive("pdfLoader",function(){
  
  return function(scope,elem,attr){
      
    elem.append("<object width='100%' height='100%' src='"+ scope.content +"'  type='application/pdf'></object>");
  };
  
});

myApp.controller("ngCtrl",function($scope){

  $scope.content ="https://gcc.geojit.net/researchdesk/OPTION STRATEGIES2.pdf"; 

});


</script>
</head>
<body ng-app="ngCtrl">
<div ng-controller="ngCtrl">
 <div style="height:100%" pdf-loader></div>
</div>
</body>
</html>

＆＃13;

iframe中的ng-src无效

2 个答案: