离子 - 本地对话框

Question

我有一个表格，我在它与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: 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 
     ); 
     } 
    }); 

我已经更新了这样的代码，当我与离子服务在浏览器中测试它，我没有得到任何再错误，但没有警报显示。 我已经做了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 
     } 
     } 
    }); 
    } 

Answer 1

要在您需要首先安装科尔多瓦对话框插件的离子Framework应用程序使用本地警报：

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

记住以下几点：

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 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或任何你想要的，它应该显示警报对话框。

好了，所以你可能会想，为什么它不能在浏览器中运行：基于实现

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

Answer 2

看起来你是10:60，因为不正确cordova-plugin-dialogs文件。 Readme将浏览器列为受支持的平台，但如果您调用navigator.notification.alert（正如所期望的那样），该插件不会回退到window.alert。

为了测试这个，我克隆了一个ionic seed project，试图添加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是否可用，并为浏览器提供适当的回退。