2016-06-30 15 views
0

私はユーザーがファイルをダウンロードできるようになりました。 私は問題に直面しています。私がテストしているとき(ブラウザ/エミュレータ/デバイス)、私はエラーがあります:FileSystemが定義されていません。Ionic:LocalFileSystemが定義されていません

私は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> 

はるかに大きなアプリケーションのための試みのためだったと私はしたこと正直に言うと、 Web上のチュートリアルからたくさんのものをコピーして貼り付けてください。もし誰かが私にいくつかの情報を与えることができれば、これはすばらしいでしょう ありがとう:)

答えて

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...' 
    }); 
} 
関連する問題