我有一个表单,我在其中使用 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
}
}
});
}
最佳答案
要在 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
}
}
关于javascript - Ionic - native 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36890885/