首页 文章

离子 - 原生对话

提问于
浏览
1

我有一个表单,我正在使用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 TypeError:无法读取 undefined 的属性'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 服务进行测试时,我不会再收到任何错误,但是没有警报出现。我在终端做了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
        }
      }
    });
  }

2 回答

  • 4

    要在 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"位。

    这是Cordova Dialogs的文档。

    根据评论更新:

    安装插件后,您应该再次编译应用程序以在平台构建中包含插件。您可能可以直接使用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 基于实现:

    好的,你可能想知道为什么它在浏览器中不起作用?以上示例仅适用于移动设备。如果您希望它也适用于浏览器,请使用下面描述的方法 by_1_like:

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

    由于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.notificationnavigator.notification.alert是否可用,并为浏览器提供适当的回退。

相关问题