angularjs - 文件传输未定义 - AngularJS

Question

我正在尝试在 angularjs(在 Ionic 中)中实现文件上传，但遇到了一些问题。我阅读了一个文档，然后在项目目录中运行了以下命令 -

bower install ngCordova
cordova plugin add org.apache.cordova.file-transfer

然后，我在index.html中添加了所需的引用 -

<!-- ngCordova script -->
<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script type="text/javascript" src="cordova.js"></script>

然后，我将服务注入(inject)到我的 Controller 中 -

angular.module('myApp').controller('AppController', ['$scope', $cordovaFileTransfer', function ($scope, $cordovaFileTransfer) 

但是，当我尝试像这样使用它时 -

var fileTransfer = new FileTransfer();
fileTransfer.upload("server url", "file path", options).then(function(result)...

我收到错误 -

Uncaught ReferenceError: FileTransfer is not defined AppController.js:35     
angular.module.controller.$scope.uploadFile AppController.js:22 (anonymous function)
n.event.dispatch jquery-2.1.3.min.js:3 
n.event.add.r.handle jquery-2.1.3.min.js:3 

我是 AngularJS 的新手，不确定这里出了什么问题。我在这里缺少引用资料或其他东西吗？谁能帮我解决这个问题吗？

提前致谢。

编辑1

这是 Ionic 的初始化方式 -

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

编辑2

AppController.js 代码 here

Answer 1

我只是为自己说话，但 FileTransfer 未定义可能有两个( ionic :三个)原因。而且您不必自己定义这些对象(FileTransfer、File)，它们在您安装两个插件后立即定义:

1. 问题

   好方法:

   document.addEventListener("deviceready", onDeviceReady, false);
   
   function onDeviceReady() {
      // as soon as this function is called FileTransfer "should" be defined
      console.log(FileTransfer);
   }
   

   不好的方法:

   // calling FileTransfer before deviceready
   var f = new FileTransfer();
   ...
   document.addEventListener("deviceready", onDeviceReady, false);
   ...
   ...
   

2. 问题

   还必须安装文件插件。调用 deviceready-function 后，“应该”定义 File-Object:

   document.addEventListener("deviceready", onDeviceReady, false);
   
   function onDeviceReady() {
      // as soon as this function is called File "should" be defined
      console.log(File);
   }
   

3. 问题( ionic )

   当使用 ionic 时，需要将插件包含到创建的平台(android、ios、blackberry)中:

   ionic plugin add org.apache.cordova.file
   ionic plugin add org.apache.cordova.file-transfer
   

有时，Ionic 很难正确构建项目，在我的例子中，要么 deviceready 根本没有被触发，要么由于编译问题，构建平台一开始就失败了。