Question

当我将ng-model分配给文本区域和输入时，模型不会更新。现在我已经读过这是因为ng-if导致了一个不同的范围，我应该使用$ parent但这在我的情况下不起作用。我已经制作了一个代码笔来证明手表没有触发，所以ng-model没有更新

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观察者：

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

code pen sample

似乎不清楚问题是什么：我的问题是这个代码是$ scope.email和$ scope.subject保持未定义

Answer 1

使用这样的对象而不是$parent：

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

HTML：

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

观看：

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

演示： http://codepen.io/anon/pen/dPGxLz

Mark Rajcok对于为什么可以找到here的非常好的详细解释。

声明$ parent后，ng-model保持未定义状态

1 个答案: