这是我的控制器代码。显示弹出窗口并单击按钮,进行一些验证:
UZCampusWebMapApp.controller('PlanCtrl',function($scope, $ionicModal, $ionicLoading, $ionicPopup) {
$scope.confirmCreatePOI = function(data) {
var myPopup = $ionicPopup.show({
templateUrl: 'templates/pois/confirmCreatePOI.html',
title: 'Confirmar creación de POI',
scope: $scope,
buttons: [
{
text: '<b>Save</b>',
onTap: function() {
var invalidEmail = $scope.email.length==0 || $scope.email==null || typeof($scope.email)=='undefined';
if ($scope.emailChecked==true && invalidEmail) {
$ionicLoading.show({ template: 'Email is mandatory'});
}
else {
data.email = $scope.email;
$scope.finalSubmitCreatePOI(data);
}
}
},
{
text: 'Cancel'
}
]
});
};
});
这是调用前一个控制器函数confirmCreatePOI
的指令代码:
UZCampusWebMapApp.directive('formCreatePointOfInterest', function($ionicLoading) {
return {
restrict : 'A',
scope: true,
controller : function($scope) {
$scope.submit = function(data) {
console.log("Submit form createpoint of interest",data);
if($scope.createPOIform.$valid) {
$scope.confirmCreatePOI($scope.data);
} else {
$ionicLoading.show({ template: 'El formulario es inválido', duration: 1500})
}
}
}
}
});
这是我的templateUrl代码:
<div id="confirm-create-poi-popup">
<p> Text </p>
<p> Text </p>
<div class="list">
<ion-checkbox ng-model="emailChecked">Receive notification</ion-checkbox>
<label class="item item-input">
<input type="email" ng-model="email">
</label>
</div>
</div>
因此,在用户点击“保存”按钮(onTap事件)后,我想检查是否已在输入字段中输入电子邮件。
但是当我用comprobation检查时:
var invalidEmail = $scope.email.length==0 || $scope.email==null || typeof($scope.email)=='undefined';
$scope.email.length==0
表达式返回错误,因为电子邮件未定义,所以ng-model
属性不能与$scope
一起使用,我在$scope.email
上没有任何价值
这是为什么? $ionicPopup $scope
财产不起作用吗?错误地使用了?
我找到了一些你可以改进的地方:)
你的onTap函数应如下所示:
onTap: function() {
// CORRECTION 1 - should use this.scope instead of $scope
var email = this.scope.email;
// CORRECTION 2 - check for 'undefined; first, then 'null', then 'length'
// (if the first OR condition is unsatisfied, the rest won't be checked for, saving time and a possible error)
var invalidEmail = typeof(email) == 'undefined' || email == null || email.length == 0 ;
// CORRECTION 3 - Either check for existence of 'emailChecked' or initialise it to 'false' in your templateUrl
var emailChecked = this.scope.emailChecked;
if (emailChecked == true && invalidEmail) {
$ionicLoading.show({ template: 'Email is mandatory' });
} else {
data.email = email;
$scope.finalSubmitCreatePOI(data);
}
}
请在这里查看代码:Ionic Play - Scope Issue in Ionic Popup。
我在控制器email
中的emailChecked
对象上创建了vm
和$scope
变量。
$scope.vm = {
email: '',
emailChecked: false
}
传递封装在对象中的变量(这里是vm
)是一种很好的做法,而不是将它们作为基本类型传递/使用。 vm
代表View Model。 Understanding Scopes。
只是一个建议,你可能会在吐司组件中显示验证错误,这里是我使用ionicToast而不是使用ionicLoading
。
我通过在templateUrl之前移动范围声明来修复该问题。
UZCampusWebMapApp.controller('PlanCtrl', function ($scope, $ionicModal, $ionicLoading, $ionicPopup) {
$scope.confirmCreatePOI = function (data) {
var myPopup = $ionicPopup.show({
scope: $scope,
templateUrl: 'templates/pois/confirmCreatePOI.html',
title: 'Confirmar creación de POI',
buttons: [{
text: '<b>Save</b>',
onTap: function () {
var invalidEmail = $scope.email.length == 0 || $scope.email == null || typeof ($scope.email) == 'undefined';
if ($scope.emailChecked == true && invalidEmail) {
$ionicLoading.show({
template: 'Email is mandatory'
});
} else {
data.email = $scope.email;
$scope.finalSubmitCreatePOI(data);
}
}
},
{
text: 'Cancel'
}
]
});
};
});
我用this.scope.cd_ticket
解决了这个问题:
var popup = $ionicPopup.show({
title: 'Validar Ticket',
scope: $scope,
template: '<input type="tel" placeholder="Digite o código do ticket" ng-model="cd_ticket" >',
buttons: [{
text: '<i class="icon ion-close"></i>',
type: 'popup-close'
},
{
text: '<i class="icon ion-checkmark"></i>',
type: 'common-btn',
onTap: function (e) {
return this.scope.cd_ticket;
}
}
]
}).then(function (res) {
if (res) {
$ionicPopup.alert({
title: 'Alerta',
template: 'Ticket: ' + $scope.cd_ticket + "<br>Resposta: " + res
});
}
console.log(res);
});