Ионных - родная Диалоги

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

Как было предложено, он работает на эмуляторах, когда я, например, ионными эмулировать ИОС, но до сих пор не работает в браузер, когда я ионный служу:

$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.

UPDATE на основе комментариев:

После установки плагина вы должны скомпилировать приложение снова включить плагин в вашей платформы сборки.Вы, наверное, можете сделать это прямо с 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 на основе реализации:

Ok, так что вы, вероятно, задаетесь вопросом, почему это не работает в браузере? Как мой пример выше работает только на мобильных устройствах. Если вы хотите работать также в браузере, пожалуйста, используйте метод, описанный ниже, @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

Похоже, ты прельстить из-за неправильной документации cordova-plugin-dialogs. Readme перечисляет браузер как поддерживаемую платформу, но плагин не отпадает в window.alert, если вы вызываете navigator.notification.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 доступны, и обеспечивает соответствующий запасной вариант для браузера.