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

ng-model stays undefined after $parent is declared

本文关键字:未定义 状态 parent 声明 ng-model      更新时间:2023-09-26

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

.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);
});

代码笔示例

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

使用这样的对象而不是使用 $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关于原因的非常好和详细的解释可以在这里找到。