离子型和ngCordova FileOpener2插件问题

Question

我目前正在用Ionic框架构建一个应用程序。我需要打开pdf的能力。我正在使用ngCordova Plugin FileOpener2来完成这项任务。

我没有收到任何错误，也没有收到提示显示的成功消息。

这是我的控制器：

module.controller('NewsCtrl', function ($cordovaFileOpener2) {

    $cordovaFileOpener2.open(
         '../img/Newsletter.pdf',
         'application/pdf'
     ).then(function() {
          console.log('Success');
     }, function(err) {
          console.log('Error' + err );
     });

});

我目前在仿真器中运行它，命令离子模拟ios -livereload-target=“iPhone-4s”。

我还在一个实际的设备上测试了它，结果与此相似。

在更改一些文件和livereload服务器时，我发现了一个错误，用控制器刷新了选项卡上的应用程序，得到了错误：

错误:未定义不是对象(计算'cordova.plugins.fileOpener2')

Answer 1

不需要那个复杂的插件！在我们公司的应用程序中，我们也需要能够打开pdf/s。我们使用https://github.com/sayanee/angularjs-pdf。效果很好。这是它在android上的样子。

​

​

它也适用于ios:它还允许你不用离开应用程序就可以打开pdf。你也可以捏，缩放，旋转。下面是代码的样子。

PDFViewer.html

 <ion-view>
    <div class="bar bar-header bar-positive">
        <button ng-click="$ionicGoBack()" class="button button-clear button-light icon-left ion-chevron-left">Go Back</button>
    </div>
    <div class="has-header">
        <ng-pdf template-url="components/pdfviewer/viewer.html" canvasid="pdf" scale="0.675">
        </ng-pdf>
    </div>
</ion-view>

Viewer.html

 <div ng-show="notLoaded" class=" center bar bar-subheader">
    <h1 class="title">Loading PDF...</h1>
</div>
<div class="tabs tabs-icon-left">
    <a class="tab-item" ng-click="goPrevious()">
        <i class="icon ion-arrow-left-c"></i> Prev
    </a>
    <a class="tab-item" ng-click="goNext()">
        <i class="icon ion-arrow-right-c"></i> Next
    </a>
</div>

<ion-scroll zooming="true" direction="xy" class="has-header">
    <canvas class="padding" id="pdf" class="rotate0"></canvas>
</ion-scroll>

viewer.controller.js

 //variable that shows and hides the pdf loading bar
$scope.notLoaded = true;

//grabs the pdfUrl
$scope.pdfUrl = ffService.pdfLink;

//sets the position of the pdf viewer controls
$scope.getNavStyle = function (scroll) {
    if (scroll > 100) return 'pdf-controls fixed';
    else return 'pdf-controls';
};

//do something on pdf progress
$scope.onProgress = function (progress) {

}

//do something once the pdf is loaded, I use this to show and hide
//the loading... header on android
$scope.onLoad = function () {
    $scope.notLoaded = false;
}

//error logger for pdf viewer
$scope.onError = function (error) {
    $scope.showCustomAlert('Something went wrong', '<div class="center">' + error + '</div>');
};

然后，您只需将js文件包含在html中，并将“pdf”插入到顶级模块中。

angular.module('ffApp', ['ionic', 'controllers', 'services', 'ngCordova', 'pdf', 'ngSanitize', 'ngImgCrop', 'chart.js', 'ionic.service.core', 'ionic.service.push']);

Answer 2

我可能迟到了，但对一个正在寻找答案的人来说。发生此错误的原因是控制器加载速度快于离子。这些插件只有在$ionicPlatform.ready()之后才能使用。所以在平台准备好后调用这些插件。

Answer 3

只是另一个非常very...late的答案。

我有相同的issue...just，因为他的插件没有正确安装！再次删除和添加ios平台可能会有所帮助。

codorva platform remove ios
cordova platform add ios