ng-model stays undefined after $parent is declared

Question

when i assign a ng-model to a text area and an input the models don't get updated. now i've read that this is because a ng-if causes a differenct scope and i should use $parent but this isn't working in my case. i've made a code pen to demonstrate that the watch isn't triggering and so the ng-model isn't updated

html:

<ion-view title="Help" hide-back-button="true">
<ion-nav-buttons side="left">
    <button class="button button-icon icon ion-chevron-left" ng-click="goBack()">
    </button>
</ion-nav-buttons>
<ion-content class="has-header">
    <form novalidate name="form" class="css-form">

        <ion-list>
            <label for="email" class="item item-input item-stacked-label" ng-if="!auth">
                <span class="input-label">
                    Email
                </span>
                <i class="icon ion-ios7-checkmark-empty balanced placeholder-icon validated" 
                    ng-show="form.email.$dirty && form.email.$valid"></i>
                <input id="email"  type="email"  name="email" ng-model='$parent.email' placeholder="john@snow.com" required>
            </label>
            <label class="item item-input item-stacked-label">
                <i class="icon ion-ios7-checkmark-empty balanced placeholder-icon validatedbut" 
                    ng-show="form.subject.$dirty && form.subject.$valid"></i>
                <textarea name="subject" ng-model='$parent.subject' class="description-textarea" rows="4" placeholder="Omschrijf uw vraag..." required>
                </textarea>
            </label>
        </ion-list>
        <useragreement></useragreement>

        <div class="padding">
            <button class="button button-block button-custom" ng-click="stelvraag()" ng-disabled="form.$invalid">
                Stel vraag
            </button> 
        </div>
    </form>

    <div class="row text-center" ng-if="!loaded">
        <ion-infinite-scroll
          icon="ion-loading-c">
        </ion-infinite-scroll>
    </div>
</ion-content>

javascript watchers :

$scope.$watch('subject',function(){
    console.log($scope.subject);
    console.log('email : ' + $scope.skiemail);
});
$scope.$watch('skiemail',function(){
    console.log($scope.email);
});

code pen sample

seems it wasn't clear what the problem was: my problem with this code is that $scope.email and $scope.subject stay undefined

What is your question? Also, why do you need to use $parent? — Joe Samanek, Dec 10 '14 at 15:58

score 0 · Accepted Answer · edited May 23 '17 at 10:33

Use an object like this instead of using $parent:

$scope.viewModel = {
  subject: '',
  email: '',
};

HTML:

<textarea name="subject" ng-model="viewModel.subject" ...

Watch:

$scope.$watch(function () { 
  return $scope.viewModel.subject; 
}, function (newValue, oldValue) {
  if (newValue === oldValue || !newValue) return;
  console.log('subject: ' + newValue);
});

Demo: http://codepen.io/anon/pen/dPGxLz

A very good and detailed explanation by Mark Rajcok's on why can be found here.

ng-model stays undefined after $parent is declared

1 Answers1