我有一个表单,我正在使用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 回答
要在 Ionic Framework 应用程序中使用本机警报,您需要先安装 Cordova Dialogs 插件:
默认情况下,此插件不包含在 Ionic Framework 中。安装插件后,您可以使用警报对话框:
请记住以下内容:
您还可以在
AndroidManifest.xml
文件中查看对话框的主题:如果需要,您可以修改此代码的
android:theme="@android:style/Theme.DeviceDefault.NoActionBar"
位。这是Cordova Dialogs的文档。
根据评论更新:
安装插件后,您应该再次编译应用程序以在平台构建中包含插件。您可能可以直接使用
ionic state restore
执行此操作,但如果不是这样添加和删除平台:我正在谈论的离子状态恢复:
然后将代码放在控制器中:
在此之后只需执行
ionic run android
或您想要的任何内容,它应该显示警告对话框。编辑 2 基于实现:
好的,你可能想知道为什么它在浏览器中不起作用?以上示例仅适用于移动设备。如果您希望它也适用于浏览器,请使用下面描述的方法 by_1_like:
由于
cordova-plugin-dialogs
的文档不正确,您似乎误入歧途。 自述将浏览器列为受支持的平台,但如果您调用 navigator.notification.alert(正如人们所期望的那样),则插件不会回退到 window.alert。为了测试这个,我克隆了一个离子种子项目,试图添加
browser
作为平台,但 navigator.notification 仍未定义。这是一个简单的解决方法:
它只是检测
navigator.notification
和navigator.notification.alert
是否可用,并为浏览器提供适当的回退。