Angular Databinding doesnt Work

Question

I have got a form where user will enter a name and click Next. What I want to do is that, when the user clicks Next, I want to alert the updated value of $scope.name inside toChat function, but initial value is alerted, which is James. How can I access the updated value inside angular function? I have some serious problems understanding sharing variables within AngularJs.

js

.controller('NewcontactCtrl', function($scope,$rootScope, $ionicHistory,$window) {

     $scope.name='James';
     $scope.myGoBack = function() {
        $ionicHistory.goBack();
      };
     $scope.toChat = function() {
         alert($scope.name);

     };
 })

html

<ion-view view-title="New contact">
    <ion-nav-back-button>
    </ion-nav-back-button>

     <ion-nav-buttons side="primary">
      <button class="button" ng-click="myGoBack()">
       Cancel 
      </button>
    </ion-nav-buttons>

     <ion-nav-buttons side="secondary">
      <button class="button" ng-click="toChat()" >
       Next
      </button>
    </ion-nav-buttons>

    <ion-content scroll="false" has-header="false" padding="true" >

        <div class="list">
            <label class="item item-input">
                <input type="text" placeholder="Name" ng-model="name" />
            </label> 
            <label class="item item-input">
                <textarea placeholder="Notes" ng-model="notes" rows="10"></textarea>
            </label> 
        </div>   
</ion-content>
</ion-view>

Can anyone help ?

Answer 1

Please see: https://github.com/angular/angular.js/wiki/Understanding-Scopes

The most relevant part in the above:

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. ...

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.

Having a '.' in your models will ensure that prototypal inheritance is in play. So, use <input type="text" ng-model="someObj.prop1"> rather than <input type="text" ng-model="prop1">.

I believe you have a directive in there somewhere (probably ion-content) that is creating a new scope where your input field is, separated from the scope where your Next button is.

To simulate this, I've used ng-repeat in the below snippet (but I'm repeating only once), which causes the same behaviour of splitting the scopes. If you were to use your controller code unmodified with this html, you'd reproduce the issue you're experiencing.

The solution around this is to 'use a dot (.)' when binding. Notice that I've wrapped the name within an object called 'data' on the scope, so now you refer to this as data.name instead of just name.

(function() {
  'use strict';

  angular.module('myApp', [])
    .controller('NewcontactCtrl', function($scope, $window) {

    $scope.repeaterTest = [1];
      $scope.data = {name: 'James'};
      $scope.toChat = function() {
        $window.alert($scope.data.name);
      };
    });

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="NewcontactCtrl">
    <label ng-repeat="test in repeaterTest">
      <input type="text" placeholder="Name" ng-model="data.name" />
    </label>
    <button class="button" ng-click="toChat()">
      Next
    </button>
  </div>

</div>

Answer 2

I think you need to alert something similar to... alert($scope.name)

Answer 3

Addition to @Paul Fitzgerald, points, ensure that ng-controller="NewcontactCtrl" is included at the top scope in HTML DOM.

Answer 4

try adding a service in order to share data within scopes

.controller('NewcontactCtrl', function($scope,$rootScope,sharedData $ionicHistory,$window) {

     $scope.name=sharedData.Name ;
     $scope.myGoBack = function() {
        $ionicHistory.goBack();
      };
     $scope.toChat = function() {
         alert(sharedData.Name);

     };
 });

app.factory('sharedData', [function () {
    var self = {};

    self.Name = "James";


    return self;
}]);