离子 - 本机对话框

Ionic - native dialogs

本文关键字：对话框 本机 离子      更新时间：2023-09-26

我有一个表单，我在其中显示一条错误消息，ng-show如下所示：

<div class="errors">
          <p ng-show="errorMessage" ng-class="error">{{ errorMessage }}</p>
</div>

我正在从控制器发送错误消息，如下所示：

$scope.login = function(form) {
    if (!form.$valid) {
      return;
    }
    var credentials = {
        phone: $scope.loginData.phone,
        password: $scope.loginData.password
    };
    $auth.login(credentials).then(function(response) {
        UserService.set(response.data.user);
        $ionicHistory.nextViewOptions({
          disableBack: true
        });
        $state.go('main.front');
    }, function(error) {
        navigator.notification.alert("Feil brukernavn eller passord.");
    });
  }

我想不是在页面上显示错误，而是显示本机设备对话框警报。但是我收到以下错误：

ionic.bundle.js：26794 类型错误：无法读取属性"alert" 定义

更新的代码：

function(error) {
      console.log('error');
      document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {
      navigator.notification.alert(
        "Feil brukernavn eller passord.",   // the message
        function() {},                      // a callback
        "Title",                            // a title
        "OK"                                // the button text
        );
      }
    });

我已经更新了这样的代码，当我在浏览器中使用 ionic serve 测试它时，我不再收到任何错误，但没有显示警报。我已经在终端中完成了cordova platform ls，我得到：

cordova-plugin-dialogs 1.2.1 "Notification"
cordova-plugin-whitelist 1.2.2 "Whitelist"

更新的代码 2

正如建议的那样，它适用于模拟器，例如当我做离子模拟ios时，但当我做离子服务时，仍然无法在浏览器中工作： 

$scope.login = function(form) {
    if (!form.$valid) {
      return;
    }
    var credentials = {
        phone: $scope.loginData.phone,
        password: $scope.loginData.password
    };
    $auth.login(credentials).then(function(response) {
        UserService.set(response.data.user);
        $ionicHistory.nextViewOptions({
          disableBack: true
        });
        $state.go('main.front');
    }, function(error) {
    console.log('error');
    document.addEventListener("deviceready", onDeviceReady, false);
      function onDeviceReady() {
        if (navigator.notification && navigator.notification.alert) {
          navigator.notification.alert(
            "Feil brukernavn eller passord.",   // the message
            function() {},                      // a callback
            "Title",                            // a title
            "OK"                                // the button text
          );
        } else {
          alert("Feil brukernavn eller passord.");
          // callbackFunction(); if you need one
        }
      }
    });
  }

要在 Ionic Framework 应用程序中使用本机警报，您需要首先安装具有以下功能的 Cordova Dialogs 插件：

cordova plugin add cordova-plugin-dialogs

默认情况下，此插件不包含在 Ionic Framework 中。安装插件后，您可以将警报对话框用于：

navigator.notification.alert(
  "Feil brukernavn eller passord.",   // the message
  function() {},                      // a callback
  "Title",                            // a title
  "OK"                                // the button text
);

请记住以下几点：

尽管对象附加到全局范围的导航器，但它在 deviceready 事件之后才可用。

您还可以在AndroidManifest.xml文件中查看对话框的主题：

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">

如果需要，可以修改此代码的android:theme="@android:style/Theme.DeviceDefault.NoActionBar"位。

以下是科尔多瓦对话框的文档。

根据评论更新：

安装插件后，您应该再次编译应用程序以将该插件包含在您的平台构建中。您可能可以直接使用 ionic state restore 执行此操作，但如果不是，只需像这样添加和删除平台：

cordova platform remove android // OR ionic platform remove android
cordova platform add android    // OR ionic platform add android

我所说的离子状态恢复：

ionic state restore

然后将代码放入您的控制器中：

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  navigator.notification.alert(
    "Feil brukernavn eller passord.",   // the message
    function() {},                      // a callback
    "Title",                            // a title
    "OK"                                // the button text
  );
}

在此之后，只需执行ionic run android或您想要的任何操作，它应该显示警报对话框。

基于实现的编辑 2：

好的，所以你可能想知道为什么它在浏览器中不起作用？正如我上面的例子仅适用于移动设备。如果您希望它也在浏览器上运行，请使用下面描述的方法，@Thilak如下：

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
  if (navigator.notification && navigator.notification.alert) {
    navigator.notification.alert(
      "Feil brukernavn eller passord.",   // the message
      function() {},                      // a callback
      "Title",                            // a title
      "OK"                                // the button text
    );
  } else {
    alert("Feil brukernavn eller passord.");
    // callbackFunction(); if you need one
  }
}

看起来你因为不正确的cordova-plugin-dialogs文档而误入歧途。自述文件将浏览器列为受支持的平台，但如果您调用 navigator.notification.alert（如人们所期望的那样），该插件不会回退到 window.alert。

为了测试这一点，我克隆了一个离子种子项目，试图添加browser作为平台，但 navigator.notification 仍未定义。

下面是一个简单的解决方法： 

  function showAlert(message, callback, title, buttonName) {
      title = title || "Default";
      buttonName = buttonName || 'OK';
      if (navigator.notification && navigator.notification.alert) {
          navigator.notification.alert(
              message, // message
              callback, // callback
              title, // title
              buttonName // buttonName
          );
      } else {
          alert(message);
          callback();
      }
  }

它只是检测navigator.notification和navigator.notification.alert是否可用，并为浏览器提供适当的回退。

相关文章：