CODEWITHSUNDEEP
javascriptangularjsionic-framework
Daniel Krom
Daniel Krom

Reputation: 10058

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

I am using Ionic framework and I have the following code: 

$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 is undefined and also $scope.loginPhone is undefined, even with ng-model="loginCountryCode" and ng-model="loginPhone"

The weird thing that if I declare $scope.loginCountryCode = 123; then the ng-model value is 123, but it doesn't recognize changes in the input. Any ideas? thanks :)

Upvotes: 0

Views: 1630

Answers (1)

Aaron Saunders
Aaron Saunders

Reputation: 33335

hard to make this right in my head without some code for the login template, so I just threw together a quick codePen here based on the nightly builds from 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));
         }
       },
     ]
   });

  };
});

Upvotes: 1

Related Questions