Ionic Popover模板URL和angular ng模型没有't同步

Ionic Popover templateURL and angular ng-model doesn't sync

本文关键字:同步 模型 模板 Popover URL ng angular Ionic      更新时间:2024-03-02

我使用的是Ionic框架,我有以下代码:

$scope.loginCountryCode;
$scope.loginPhone;
//==============================//
$ionicBackdrop.retain();
$ionicPopup.show({
     title 		: 'Please Login',
     subTitle	: 'Please enter the following details',
     templateUrl : 'loginTemplate.html',
     scope 		: $scope,
     buttons 	: [{
	 	text: '<b>Send SMS Code</b>',
  	        	type: 'button-positive',
  	        	onTap: function(e)
  	        	{	
   	        		$scope.buttonToSend = e;
   	        		if(!$scope.sendSMS())
   	        			  e.preventDefault();
   	        		else
   	        			 $scope.userDataForm = true;
   	        	}
   	        }]
    });
    
//==============================//
$scope.sendSMS = function()
{
if(!$scope.loginCountryCode || $scope.loginCountryCode ==""){
    $scope.loginCountryCodeEmpty = true;
return false;
}
    
if(!$scope.loginPhone || $scope.loginPhone ==""){
$scope.loginPhoneEmpty = true;
return false;
    }
}             
    
    
<div class="container">
    <label class="item item-input">
        <div class="input-label" style="float:left;width:55%">
            Country Code
        </div>
        <input type="tel" placeholder="123..." ng-model="loginCountryCode">
    </label>
    
    <label class="item item-input">
        <div class="input-label" style="float:left;width:50%">
            Phone Number
        </div>
        <input type="text" placeholder="123...." ng-model="loginPhone">
    </label>
</div>

$scope.loginCountryCode未定义,$scope.loginPhone也未定义,即使使用ng-model="loginCountryCode"ng-model="loginPhone"

奇怪的是,如果我声明$scope.loginCountryCode = 123;,那么ng模型值是123,但它无法识别输入中的变化。有什么想法吗?谢谢:)

如果没有登录模板的一些代码,我很难在脑海中做到这一点,所以我只是在这里根据Ionic 的夜间构建构建了一个快速的codePen

http://codepen.io/aaronksaunders/pen/ogdzNE

angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {
 // Triggered on a button click, or some other target
 $scope.showPopup = function() {
   $scope.loginData = {};
   // An elaborate, custom popup
   var myPopup = $ionicPopup.show({
     templateUrl: 'popup-template.html',
     title: 'Enter Wi-Fi Password',
     subTitle: 'Please use normal things',
     scope: $scope,
     buttons: [
       { text: 'Cancel' },
       {
         text: '<b>Save</b>',
         type: 'button-positive',
         onTap: function(e) {
           alert(JSON.stringify($scope.loginData));
         }
       },
     ]
   });
  };
});