前段时间有个功能需求,就是从电脑往手机某个文件夹拷贝一堆文件后,Ionic能把这些文件名称获取到一个数组里。而通过ngCordova的File插件虽然可以很方便地获取设备的文件和目录,并实现常见的操作,但获取并操作文件的前提是必须提供文件名称,所以只通过它是不行的。经过各种尝试,终于实现了这个功能。思路是ngCordova的File插件提供路径,HTML5 FileSystem的DirectoryReader.readEntries()
提供方法。
File插件
首先,在Cmd窗口中输入ionic start listfilesdemo blank
回车,新建一个名为listfilesdemo
的Ionic空白项目。
然后,输入cd your-app-name
回车,进入到Ionic项目根目录。开始安装ngCordova,输入bower install ngCordova
回车,然后在listfilesdemo\www\index.html
中cordova.js
前面引入相应的js文件:
<script src="lib/ngCordova/dist/ng-cordova.js"></script> |
接下来,在listfilesdemo\www\js\app.js
中将ngCordova模块添加到angular.module
:
angular.module('starter', ['ionic', 'ngCordova']) |
然后,在Cmd窗口中输入cordova plugin add cordova-plugin-file
回车,安装File插件。
HTML
将listfilesdemo\www\index.html
中<body></body>
标签替换如下:
<body ng-app="starter" ng-controller="filesCtrl"> |
ng-controller
指令定义了AngularJS控制器filesCtrl
。头部右侧有个按钮,点击执行函数synchroniseFilelist()
,实现列表与手机给定文件夹内文件名称的同步。下面有个列表,将文件名一行行地呈现出来。
控制器
在listfilesdemo\www\js\
下新建controllers.js
文件,写入:
angular.module('starter.controllers', ['ionic']) |
cordova.file.externalRootDirectory
是指手机外部存储的根目录,在手机上看是/storage/emulated/0/
,在电脑上看是计算机\your-device-name\Phone\
。注意,这个外部存储并不是扩展的TF卡,还是在手机内部,可简单理解为能被电脑访问的手机自身存储。
读取给定目录的内容时,先创建DirectoryReader
,然后调用readEntries()
方法。entries
是个数组,每个数组元素的name
属性就是文件或文件夹名称。
注意,将controllers.js
文件链接到index.html
:
<script src="js/controllers.js"></script> |
还要将控制器模块添加到listfilesdemo\www\js\app.js
的angular.module
:
angular.module('starter', ['ionic', 'ngCordova', 'starter.controllers']) |
测试
输入ionic platform add android
回车,添加安卓平台。连接手机后,输入ionic run android
回车,让App在手机上运行。在电脑上建一个包含一些文件的文件夹test
,并拷贝到计算机\your-device-name\Phone\
下。如果前面没问题的话,点击『同步』按钮,就可以看到效果了。