模板 Url 中的 ng-model $ionicPopup不适用于范围
ng-model inside $ionicPopup templateUrl is not working with scope
这是我的控制器代码。显示一个弹出窗口,然后单击按钮,进行一些验证:
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})
}
}
}
}
});
这是我的模板网址代码:
<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事件)后,我想检查是否已在输入字段中输入电子邮件。
但是当我用补偿检查它时:
var invalidEmail = $scope.email.length==0 || $scope.email==null || typeof($scope.email)=='undefined';
$scope.email.length==0
表达式返回错误,因为电子邮件未定义,因此ng-model
属性不适用于$scope
,我在$scope.email
上没有得到任何值
为什么?$ionicPopup $scope
属性不起作用吗?用错了?
我用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);
});
我发现了更多可以改进的地方:)
您的 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);
}
}
请在此处浏览代码:离子播放 - 离子弹出窗口中的范围问题。
我在控制器$scope
中的vm
对象上创建了email
和emailChecked
变量。
$scope.vm = {
email: '',
emailChecked: false
}
传递封装在对象中的变量是一种很好的做法,这里vm
,而不是将它们作为基元类型传递/使用。 vm
代表 视图模型。了解范围。
只是一个建议,您可能会在 toast 组件中显示验证错误,这是我使用 ionicToast 而不是使用 ionicLoading
的一个。
我通过将范围声明移动到模板URL之前来解决这个问题。
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'
}
]
});
};
});
相关文章:
- html5 drawImage适用于firefox,而不是chrome
- Jquery Ajax POST不工作.适用于GET
- 如何调试遗留的javascript代码(适用于IE,但在Google Chrome中不正常)
- .load()适用于window,而不是ID
- 使用Jquery更改css样式适用于id's、 不在课堂上
- 提交按钮不会;不适用于Chrome或Firefox,但适用于Internet Explorer
- 为什么 javascript 中的“btoa”编码适用于 20 位字符串而不是 20 位整数
- Javascript String to Date适用于Chrome,而不是FF或Safari
- Onchange,向上,向下箭头键适用于FF和Chrome,但在IE中不起作用
- .load() 适用于 IE 和 dreamweaver 预览版,但不能使用 opera 和 chrome
- 找不到适用于 Highcharts 的 JSON 数组语法
- 为什么在jQuery中使用focusout适用于Firefox,而使用addEventListener则不适用;t
- jQuery选择菜单验证器适用于FF和Chrome,但不适用IE
- 单选按钮'onclick'适用于Chrome和Firefox,但不适用IE
- JQuery ScrollTop适用于chrome,但不适用firefox
- window.opener.location.href适用于IE,但不适用Chrome或Safari
- Frame Busting buster不完全适用于IE
- Jquery touch punch适用于Chrome和Firefox,但不适用IE
- 背景更改仅适用于chrome+$.预加载不适用;不起作用
- JavaScript window.location.replace适用于Firefox,但不适用IE或Chrome