概述
ngCordova是AngularJs在Cordova Api的基础上, 封装的服务,可以让开发者拥有用js调起手机硬件的功能.
在cordova插件的sucess和error js回调方法中,是无法使用 angularjs的$scope对象和注入的方法的,只能访问全局的方法和变量,这样会导致很多麻烦,必须使用传统的js方法写很多难看的代码。使用ngCordova应该可以解决这个问题。
安装
下载
$ bower install ngCordova
引入js
将ng-cordova.js 和 cordova.js添加到index.html中.
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
在angularjs中添加ngCordova依赖
var myApp = angular.module('myApp', ['**', '**', 'ngCordova']);
插件
参考官网
通过安装各种插件, 调用插件的方法, 可以访问手机设备, 比如摄像头, 手势, 音量, 亮度, 文件, 蓝牙, 短信等.
在使用每个插件之前,必须先检测设备是否就绪.
//1.可以通过cordova内置的原生事件'deviceready'来检测.
document.addEventListener("deviceready", function () {
$cordovaCamera.getPicuture({})
.then(
function(){},
function(){}
);
},
false);
//2 可以使用Ionic带的
$ionicPlatform.ready(
function() {
$cordovaCamera.getPicuture({})
.then(
function(){},
function(){}
);
}
);
通过下面的命令添加插件到项目中:
cd 到项目目录下执行,
cordova plugin add org.apache.cordova.camera
安装完毕后, 在项目目录下的plugins文件夹下, 会多出一个文件夹cordova-plugin-camera
camera
链接
这个插件只在真实环境中有效, 不在模拟环境中生效
var module = angular.module('shopstyle');
module.controller('',
['$scope', '$cordovaCamera',
function($scope, $cordovaCamera){
$scope.openCamera = function () {
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
//返回一个图片数据的一个对象
$cordovaCamera.getPicture(options)
.then(
function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}, function(err) {
// error
}
);
}
}]);