ng-cordova(插件库)

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/final-elysion/p/6096622.html

文章标签：

#javascript #ViewUI

本文介绍如何配置ngCordova环境并使用$cordovaDialogs插件实现对话框、提示框及输入框等功能。首先通过bower安装ngCordova，然后在项目中引入ng-cordova.js并在cordova.js之前加载。接下来在Angular模块中注入'ngCordova'模块，并通过$cordovaDialogs调用alert、confirm及prompt等方法。

ng-cordova

环境配置

1.执行以下命令

bower install ngCordova

2.引用文件(在引用cordova.js之前引用)

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

3.注入模块

    angular.module('App', ['ngCordova'])

4.使用

添加需要用的插件

cordova plugin add ...

在使用的serveic/controller注入要用的插件

$cordovaDialogs (弹出对话框,提示框,输入框)

添加

cordova plugin add cordova-plugin-dialogs

使用

alert(message, title, buttonName)
confirm(message, title, buttonArray)
prompt(message, title, buttonArray, defaultText)
beep(repetitions)

demo

    app.controller('MyCtrl', function($scope, $cordovaDialogs) {

      $cordovaDialogs.alert('message', 'title', 'button name')
        .then(function() {
          // callback success
        });

      $cordovaDialogs.confirm('message', 'title', ['button 1','button 2'])
        .then(function(buttonIndex) {
          // no button = 0, 'OK' = 1, 'Cancel' = 2
          var btnIndex = buttonIndex;
        });

      $cordovaDialogs.prompt('msg', 'title', ['btn 1','btn 2'], 'default text')
        .then(function(result) {
          var input = result.input1;
          // no button = 0, 'OK' = 1, 'Cancel' = 2
          var btnIndex = result.buttonIndex;
        });

      // beep 3 times
      $cordovaDialogs.beep(3);

    });

转载于:https://www.cnblogs.com/final-elysion/p/6096622.html