javascript - Ionic - native 对话框

Question

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

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

我从这样的 Controller 发送一条错误消息:

$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 TypeError: Cannot read property 'alert' of undefined

更新代码:

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

如建议的那样，它可以在模拟器上运行，例如当我执行 ionic emulate ios 时，但仍然无法在浏览器中运行，当我执行 ionic serve 时:

$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
        }
      }
    });
  }

Answer 1

要在 Ionic Framework 应用程序中使用 native 警报，您需要先安装 Cordova Dialogs 插件:

cordova plugin add cordova-plugin-dialogs

默认情况下，此插件不包含在 Ionic 框架中。安装插件后，您可以使用警告对话框:

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

记住以下几点:

Although the object is attached to the global scoped navigator, it is not available until after the deviceready event.

例如，您还可以在 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" 位。

这是 Cordova Dialogs 的文档.

根据评论更新:

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

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

我所说的 ionic 状态恢复:

ionic state restore

然后将代码放入您的 Controller 中:

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
  }
}