1 以使用ActionSheet为例子,虽然ionic已经有类似的directive,但是试一下ngcordova的也不防
2 download ionic seed 熟悉使用nodejs的朋友,可以使用nodejs工具去下载
1 sudo npm install -g cordova ionic 2 新建工程目录,在cmd命令下进入到该目录。 3 下载工程:ionic start myApp tabs 4 cd myApp 5 下载iOS的platform : ionic platform add ios 6 build ios: ionic build ios 7 运行工程( 需要ios系统才可以): ionic emulate ios
3 在myapp目录下面
bower install ngCordova
4 把ActionSheet plugin下载到plugins是目录
cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-actionsheet.git
5 代码部分
5.1 把ng-cordova.js添加到index.html
<!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/ngCordova/dist/ng-cordova.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script>
5.2 html 代码
<button data-ng-click="testDeleteSheet()">test actionsheet</button>
5.3 js代码
$scope.testDeleteSheet = function () { var options = { addCancelButtonWithLabel: 'Cancel', addDestructiveButtonWithLabel : 'Delete it' }; window.plugins.actionsheet.show(options); }
5.3 在config.xml添加下面代码
<feature name="ActionSheet"> <param name="ios-package" value="ActionSheet" /> </feature>
运行:记得要build在emulate
ionic build ios ionic emulate ios
效果: