Ionic:未定义LocalFileSystem

时间:2016-06-30 10:32:42

标签: angularjs cordova ionic-framework

我试图制作应用程序,我的用户可以下载文件。 我遇到了一个问题:当我测试(浏览器/模拟器/设备)时,我发现了一个错误:FileSystem没有定义。

我删除并重新安装了cordova,我已经放了一些console.log以确保设备准备好但没有任何改变!我还在反对这个问题。我在网上看了很多东西,但我找不到答案。

所以有我的代码

App.js

  // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic' ])

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

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})


.controller("FileController", function($scope,$ionicPlatform, $ionicLoading) {
  $ionicPlatform.ready(function() {

    console.log('platform Ready!');
});
    $scope.download = function() {
      $ionicLoading.show({
     template: 'Loading...'
   });

  window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs){
       fs.root.getDirectory(
           "ExampleProject",
           {
               create: true
           },
           function(dirEntry) {
               dirEntry.getFile(
                   "test.png",
                   {
                       create: true,
                       exclusive: false
                   },
                   function gotFileEntry(fe) {
                       var p = fe.toURL();
                       fe.remove();
                       ft = new FileTransfer();
                       ft.download(
                           encodeURI("http://ionicframework.com/img/ionic-logo-blog.png"),
                           p,
                           function(entry) {
                               $ionicLoading.hide();
                               $scope.imgFile = entry.toURL();
                           },
                           function(error) {
                               $ionicLoading.hide();
                               alert("Download Error Source -> " + error.source);
                           },
                           false,
                           null
                       );
                   },
                   function() {
                       $ionicLoading.hide();
                       console.log("Get file failed");
                   }
               );
           }
       );
   },
   function() {
       $ionicLoading.hide();
       console.log("Request for filesystem failed");
   });
}

$scope.load = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
        fs.root.getDirectory(
            "ExampleProject",
            {
                create: false
            },
            function(dirEntry) {
                dirEntry.getFile(
                    "test.png",
                    {
                        create: false,
                        exclusive: false
                    },
                    function gotFileEntry(fe) {
                        $ionicLoading.hide();
                        $scope.imgFile = fe.toURL();
                    },
                    function(error) {
                        $ionicLoading.hide();
                        console.log("Error getting file");
                    }
                );
            }
        );
    },
    function() {
        $ionicLoading.hide();
        console.log("Error requesting filesystem");
    });
}

 })

Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content ng-controller="FileController">
                <button class="button" ng-click="download()">Download</button>
                <button class="button" ng-click="load()">Load</button>
                {{imgFile}}
                <img ng-src="{{imgFile}}">
            </ion-content>
        </ion-pane>
    </body>
</html>

说实话,这是为了尝试更大的应用程序而且我已经从网络上的教程中复制/粘贴了很多(所有......)的东西。如果有人能给我一些信息,那就太好了 谢谢:)

1 个答案:

答案 0 :(得分:1)

只有一切准备就绪后,LocalFileSystem才可用,您可以使用$ionicPlatform.ready功能查看。如果您将window.requestFileSystem函数放在$ionicPlatform.ready内,它应该可以正常工作。

所以:

.controller("FileController", function($scope,$ionicPlatform, $ionicLoading) {
  $ionicPlatform.ready(function() {

    console.log('platform Ready!');

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs){
       fs.root.getDirectory(
           "ExampleProject",
           {
               create: true
           },
           function(dirEntry) {
               dirEntry.getFile(
                   "test.png",
                   {
                       create: true,
                       exclusive: false
                   },
                   function gotFileEntry(fe) {
                       var p = fe.toURL();
                       fe.remove();
                       ft = new FileTransfer();
                       ft.download(
                           encodeURI("http://ionicframework.com/img/ionic-logo-blog.png"),
                           p,
                           function(entry) {
                               $ionicLoading.hide();
                               $scope.imgFile = entry.toURL();
                           },
                           function(error) {
                               $ionicLoading.hide();
                               alert("Download Error Source -> " + error.source);
                           },
                           false,
                           null
                       );
                   },
                   function() {
                       $ionicLoading.hide();
                       console.log("Get file failed");
                   }
               );
           }
       );
   },
   function() {
       $ionicLoading.hide();
       console.log("Request for filesystem failed");
   });
  });

   $scope.download = function() {
      $ionicLoading.show({
     template: 'Loading...'
   });
}