一,安装ngCordova bower install ngCordova --save-dev 二,引入ng-cordova.js文件 把ng-cordova.js或ng-cordova.min.js 引入到index.html中。 注意顺序:要放在cordova.js之前,AngularJS/ Ionic文件之后(ngCordova依赖AngularJS) 三,注入ng-cordova依赖 在主程序的app.js中引入ng-cordova依赖 angular.module('myApp',['ngCordova']) 四,添加插件到Cordova CLI环境中 一个较好的cordova插件清单链接 http://doc.wex5.com/cordova-plugins/ 官网ng-cordova插件集合:http://ngcordova.com/docs/plugins/ eg.安装照相机插件 在项目的目录下,打开命令行,输入 $ cordova plugin add cordova-plugin-camera 查看已安装插件 $ cordova plugin ls cordova-plugin-camera 2.1.1 "Camera" 五,camera插件的使用详情 1. 主js文件(app.js)中要有以下代码,这些功能是启动应用就要有。 angular.module('myApp', [ 'ionic', 'ngCordova', 'ionic-native-transitions', 'myApp.controllers', 'myApp.services', 'myApp.directives' ]) .run(function ( $ionicPlatform, $timeout, $rootScope, $cordovaNetwork ) { $ionicPlatform.ready(function () { if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { // org.apache.cordova.statusbar required StatusBar.styleDefault(); } } }); 2.在需要使用的模块中注入$cordovaCamera服务 //点击换头像的方法 $scope.action.toChangeAvatar = function () { var hideSheet = $ionicActionSheet.show({ buttons: [ {text: '拍照'}, {text: '从手机相册选择'} ], cancelText: '取消', cancel: function () { }, buttonClicked: function (index) { console.log(index); if (index == '0') { document.addEventListener("deviceready", 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: true, correctOrientation: true }; $cordovaCamera.getPicture(options).then(function (imageData) { $scope.data.imageSrc = "data:image/jpeg;base64," + imageData; }, function (err) { // error }); }, false); } else if (index == '1') { document.addEventListener("deviceready", function () { //从手机相册选择 var options = { destinationType: Camera.DestinationType.FILE_URI, sourceType: 2, //设为0或2,调用的就是系统的图库 quality: 50, allowEdit: true, targetWidth: 200, targetHeight: 200 }; $cordovaCamera.getPicture(options).then(function (imageURI) { $scope.data.imageSrc = imageURI; }, function (err) { // error }); //$cordovaCamera.cleanup().then(); // only for FILE_URI }, false); } return true; } }); 3.在视图上绑定 头像
转载于:https://www.cnblogs.com/xfcao/p/6438208.html