我们的问题是ng-model没有正确更新或至少我们认为。我们的问题似乎是,当我们从输入字段中连续删除字符时,我们的ng模型不会自我更新。
我们有两个输入字段,其中一个是tinyMCE textarea。
<div class="form-group" ng-class="{'has-error has-feedback': vacancyForm.inputDescription.$touched && vacancyForm.inputDescription.$invalid}">
<label for="inputDescription">{{ 'Vacancy.Description' | translate }}</label>
<textarea ui-tinymce="tinymceOptions" ng-model="vacancy.description" ng-change="vm.pasteDescriptionTextInSummary()" ng-model="tinymceModel" class="form-control" required rows="8"></textarea>
<input type="hidden" ng-model="vacancy.description" name="inputDescription">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true" ng-show="vacancyForm.inputDescription.$touched && vacancyForm.inputDescription.$invalid"></span>
<span class="help-block text-danger" ng-show="vacancyForm.inputDescription.$touched && vacancyForm.inputDescription.$invalid">{{ 'Vacancy.Description.Alert' | translate }}</span>
</div>
<div class="form-group" ng-class="{'has-error has-feedback': vacancyForm.inputSummary.$touched && vacancyForm.inputSummary.$invalid}">
<label for="inputSummary">{{ 'Vacancy.Summary' | translate }} <small>{{300 - vacancy.summary.length}} {{ 'Vacancy.Characters' | translate }}</small></label>
<textarea ng-model="vacancy.summary" minlength="1" maxlength="300" name="inputSummary" class="form-control" required rows="2"></textarea>
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true" ng-show="vacancyForm.inputSummary.$touched && vacancyForm.inputSummary.$invalid"></span>
<span class="help-block text-danger" ng-show="vacancyForm.inputSummary.$touched && vacancyForm.inputSummary.$invalid">{{ 'Vacancy.Summary.Alert' | translate }}</span>
</div>
在上面的代码块中,我们希望将vacancy.summary模型设置为vacancy.description模型。我们使用下面的javascript函数,该函数由ng-change触发。
vm.pasteDescriptionTextInSummary = function(e) {
var desc = $scope.vacancy.description;
if (desc) {
desc = desc.replace(/(<([^>]+)>)/ig, '')
.replace(/ /gi, ' ')
.replace(/&/gi, '&')
.replace(/</gi, '<')
.replace(/>/gi, '>');
var cutString = '';
if (desc.length > 300) {
cutString = desc.substring(0, 300);
$scope.vacancy.summary = cutString;
} else {
$scope.vacancy.summary = desc;
}
} else {
$scope.vacancy.summary = desc;
}
};
这个功能就像我们想要的那样工作,但是就像标题所说的那样,我们在连续删除字符方面遇到了问题,并且它以块的形式更新,而不是按字符更新(摘要周期?)。即使我们将模型直接设置为彼此,即使它没有通过该功能,它仍然没有正确更新。