I am working on an angular app with a view where the user has an input where he can set his phone number.
<div class="modal">
<ion-header-bar class="actu_header">
<h1 class="title">Nouvelles Infos</h1>
<div class="button button-clear" style="width:50px" ng-click="cancel()"><span class="icon ion-chevron-down"></span></div>
</ion-header-bar>
<ion-content class="padding_header modalPhone">
<h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4>
<label class="item item-input">
<span class="input-label"><i class="ion-ios-telephone"></i> </span>
<input type="tel" ng-model="telephone" placeholder="Entrez votre numero de mobile"/>
</label>
<p class="err_container" ng-if="err">{{err}}</p>
<button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
Valider
</button>
</ion-content>
</div>
when the user clicks on the button. It is supposed to send the telephone data to the server. This is the relevant controller from which the preceding modal depends:
.controller('RegisterCtrl', function($scope, $http, $location, $localStorage,$ionicLoading, $ionicHistory, mySock, user,$cordovaNetwork, $ionicModal){
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
$scope.err = "";
$scope.user={};
// $scope.telephone = "";
$scope.launchModal = function(){
$ionicModal.fromTemplateUrl('templates/phoneConfirmation.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal2 = modal;
$scope.modal2.show();
});
}
$scope.cancel = function(){
$scope.goBack(-1);
$scope.modal2.hide();
}
// $scope.telephone = "";
$scope.sendPhoneNumber = function(){
console.log($scope.telephone);
$http.post(serverAddress+'/user/sendConfirmationSms', {telephone: $scope.telephone}).success(function(data){})
}
$scope.launchReq = function(){
if($scope.err)
delete $scope.err;
if(window.device && $cordovaNetwork.isOffline()){
error_reporter.show({texte: "Connectez vous d'abord à internet!"});
}
else{
$ionicLoading.show({
content: 'Loading Data',
animation: 'fade-out',
showBackdrop: false,
hideOnStateChange: true
});
$http.post(serverAddress+'/user/create',$scope.user).success(function(data){
$localStorage.set('token',data[0].token);
$localStorage.setObject('user',data[0]);
$localStorage.setObject('friends',[]);
user.getCoord();
mySock.req(serverAddress+'/connexion/setSocket',{id: data[0].id}); //Link socket_id with the user.id
$location.path('/user/profil');
}).error(function(err){
$ionicLoading.hide();
$scope.err = "Erreur veuillez vérifier que tous les champs sont remplis et que l'adresse mail n'est pas déjà utilisée.";
});
}
}
})
Whatever I type in the input field the value of $scope.telephone that prints to the console is always an empty string. Thus the value of telephone is not actually sent to the server even though I specified ng-model="telephone" on the input tag.
---update---
The problematic peace of html was actually a modal triggered by clicking on an element with the function launchModal in the registerCtrl. By unlinking my modal from the RegisterCtrl and linking it to a new controller it finally worked :
<div class="modal" ng-controller ="PhoneCtrl">
<ion-header-bar class="actu_header">
<h1 class="title">Nouvelles Infos</h1>
<div class="button button-clear" style="width:50px" ng-click="cancel()"><span class="icon ion-chevron-down"></span></div>
</ion-header-bar>
<ion-content class="padding_header modalPhone">
<h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4>
<label class="item item-input">
<span class="input-label"><i class="ion-ios-telephone"></i> </span>
<input type="tel" ng-model="$parent.telephone" placeholder="Entrez votre numero de mobile"/>
</label>
<p class="err_container" ng-if="err">{{err}}</p>
<button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
Valider
</button>
</ion-content>
</div>
and this is the new controller
.controller('PhoneCtrl', function($scope, $http, $location, $localStorage,$ionicLoading, $ionicHistory, mySock, user,$cordovaNetwork, $ionicModal){
$scope.cancel = function(){
$scope.goBack(-1);
$scope.modal2.hide();
}
$scope.sendPhoneNumber = function(){
alert($scope.telephone)
console.log($scope.telephone);
$http.post(serverAddress+'/user/sendConfirmationSms', {telephone: $scope.telephone}).success(function(data){})
}
})
But I still dont understand why it wasnt working in the original controller.. if someone has an idea ?
The problem is specific with ion-content because of the way this directive is defined in the Ionic source code. It specifically creates it's own child scope.
I am able to get around the problem by binding my inputs to $parent.telephone
change this
ng-model="telephone"
To this
ng-model="$parent.telephone"
So
<ion-content class="padding_header modalPhone">
<h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4>
<label class="item item-input">
<span class="input-label"><i class="ion-ios-telephone"></i> </span>
<input type="tel" ng-model="$parent.telephone" placeholder="Entrez votre numero de mobile"/>
</label>
<p class="err_container" ng-if="err">{{err}}</p>
<button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
Valider
</button>
</ion-content>
More details you can find here
problem-with-ion-content-and-scope-vars-inside-function
as per your request, take a look below
my Index.html with controller
<!DOCTYPE html>
<html ng-app="routerApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script>
var routerApp = angular.module('routerApp', ['ui.router', 'ionic', 'ngCordova']);
routerApp.controller('RegisterCtrl', ['$scope', '$http', '$location', '$ionicLoading', '$ionicHistory','$cordovaNetwork', '$ionicModal',
function($scope, $http, $location, $ionicLoading, $ionicHistory,$cordovaNetwork, $ionicModal){
$scope.telephone = "";
$scope.sendPhoneNumber = function(){
alert("--"+$scope.telephone);
console.log($scope.telephone);
/* $http.post(serverAddress+'/user/sendConfirmationSms', {telephone: $scope.telephone}).success(function(data){}) */
}
}]);
</script>
</head>
<body ng-controller="RegisterCtrl">
<div class="modal">
<ion-header-bar class="actu_header">
<h1 class="title">Nouvelles Infos</h1>
<div class="button button-clear" style="width:50px" ng-click="cancel()"><span class="icon ion-chevron-down"></span></div>
</ion-header-bar>
<ion-content class="padding_header modalPhone">
<h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4>
<label class="item item-input">
<span class="input-label"><i class="ion-ios-telephone"></i> </span>
<input type="tel" ng-model="$parent.telephone" placeholder="Entrez votre numero de mobile"/>
</label>
<p class="err_container" ng-if="err">{{err}}</p>
<button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
Valider
</button>
</ion-content>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-cordova/0.1.23-alpha/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
</body>
</html>
make sure you will download and reference cordova.js in your html file.