AngularJS和HTML5 FileSystem配合读取本地文本文件

Ionic由于其使用Web技术构建移动应用程序的特性,注定在调用系统原生API方面存在先天不足,一般需要ngCordova插件或引入HTML5新特性才能实现。本文主要介绍在Ionic框架下利用AngularJS和HTML5 FileSystem的特性,实现读取本地文本文件功能。

HTML

在Cmd窗口中输入ionic start your-app-name blank回车,新建Ionic空白项目后,在your-app-name\www\index.html<ion-content></ion-content>标签内写入:

<div ng-controller="textCtrl" class="container">
<h1>Select text file</h1>
<input type="file" on-read-file="showContent($fileContent)" />
<div ng-if="content">
<h2>File content is:</h2>
<pre>{{ content }}</pre>
</div>
</div>

ng-controller指令定义了AngularJS控制器textCtrlng-if指令用于在content为 false时移除HTML元素div,ture时添加。

自定义指令

HTML中出现的on-read-file指令需要定义,在your-app-name\www\js\下新建directives.js文件,写入:

angular.module('starter.directives', [])
.directive('onReadFile', function ($parse) {
return {
restrict: 'A',
scope: false,
link: function(scope, element, attrs) {
var fn = $parse(attrs.onReadFile);

element.on('change', function(onChangeEvent) {
var reader = new FileReader();

reader.onload = function(onLoadEvent) {
scope.$apply(function() {
fn(scope, {$fileContent:onLoadEvent.target.result});
});
};

reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
});
}
};
});

这一段代码让on-read-file指令有了意义。restrict: 'A'的意思是只限属性(attribute)使用,scope: false的意思是节点的作用域scope

link属性是一个用于DOM操作任务的函数,将一些事件需要绑定到某个元素上,通常有3个参数,包括与指令元素关联的作用域scope、与指令关联的元素element,以及目标元素的属性attrs$parse的作用是将AngularJS表达式attrs.onReadFile转换成函数。element.on('change', function() {...})element一旦change,就触发function() {...}。里面,onload事件会在页面或图像加载完成后立即发生。

至于FileReader(),就是HTML5 FileSystem提供的API,属性有result等,方法有readAsText()等,按照字面就能理解什么意思。

控制器

最后,在your-app-name\www\js\下新建controllers.js文件,写入:

angular.module('starter.controllers', [])
.controller('textCtrl', function ($scope) {
$scope.showContent = function($fileContent){
$scope.content = $fileContent;
};
});

$fileContent的值赋给$scope.content,通过$scope传给视图(HTML)。

注意,directives.jscontrollers.js文件记得链接到index.html

<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>

还要将其模块添加到your-app-name\www\js\app.jsangular.module

angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])

测试

在浏览器或手机运行后,点击『选择文件』按钮,浏览器会调出资源管理器,手机会调出自带的文件管理器,选择一个文本文件点击,即可在屏幕上看到内容。