Ionic Popover templateURL和角度ng模型不同步

时间:2015-02-22 19:14:21

标签: javascript angularjs ionic-framework ionic

我正在使用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;
    }
}             
    
&#13;
    
<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>
&#13;
&#13;
&#13;

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

奇怪的是,如果我声明$scope.loginCountryCode = 123;,则ng-model值为123,但它不会识别输入中的变化。有任何想法吗?谢谢:))

1 个答案:

答案 0 :(得分:1)

如果没有登录模板的代码,很难在我脑海中做到这一点,所以我只是根据Ionic的夜间版本将这里的快速代码拼凑在一起

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));
         }
       },
     ]
   });

  };
});