angular $scope.variable is not updating using a ng-model directive on input

Question

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 ?

Are you sure it is the binding which isn't working and not the server call? if you add console.log($scope.telephone) above $http.post, does the telephone number get logged to the console as you expect? — Rhumborl
– Rhumborl, Commented Jan 22, 2016 at 13:12
@Rhumborl no when I try to console.log($scope.telephonethe only thing I get is an empty string no matter what — David Geismar
– David Geismar, Commented Jan 22, 2016 at 19:53
Please post your HTML and JS file completely. I am getting proper value on console. Try with my answer again. — Pratap A.K
– Pratap A.K, Commented Jan 23, 2016 at 3:32

Pratap A.K · Accepted Answer · 2016-02-05 11:06:33Z

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.

when I console.log($scope.telephone) I always get an empty string no matter what I have in my input tag
Above code is working for me!! I am getting entered value on console.
Hey Pratap, thanks for your answer but I still cant update console.log my telephone value (It doesnt know the $parent service...) Can you show me how you update the code on controller side ?
still getting blank space when I try to console.log telephone. But when I display {{telephone}} directly in the view, it is working
Did you try to execute my code(index.html)? I am getting entered value on console. I am not facing any issue. If still needed help, create a jsfiddle/Plunker and provide the link.

vamshi krishna kurella · Accepted Answer · 2016-01-22 13:38:50Z

0

Is it the total code you are using? If yes, then you missed 'config' variable in $http.post() call.

config should include the headers which you haven't included in the above code!

If you have included it in your code, please share the actual files.

answered Jan 22, 2016 at 13:38

vamshi krishna kurella

3321 silver badge10 bronze badges

Comments

nolines · Accepted Answer · 2016-01-22 13:45:31Z

0

if you are sure about your request json like this ,

{
telephone:$scope.telephone
}

try followings:

1) use console.log($scope.telephone) above the service to check if its correct value.

2) try to edit your json like this `

$http.post(serverAddress+'/user/sendConfirmationSms', 
{
"telephone": $scope.telephone
})
.success(function(data){})

3) check your service url and port numbers (this is important general mistake)

answered Jan 22, 2016 at 13:45

nolines

1501 silver badge15 bronze badges

Collectives™ on Stack Overflow

angular $scope.variable is not updating using a ng-model directive on input

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related