ngModel 格式化程序更改 $scope

Question

有一个input 和ngModel，其中有$formatters 和$parsers -

link: function(scope, element, attrs, ngModel) {
    //format text going to user (model to view)
    ngModel.$formatters.push(function(obj) {
        return obj.first;
    });
}

在我对输入进行任何更改后，我错过了示波器上的这个模型，意思是 -{{person.first}} 什么都不显示。

这是完整的代码 -

var myAppModule = angular.module('myApp', []); 
	    myAppModule.controller('myCtrl',function ($scope) {
	    	$scope.person = {
				first: 'Alice',
				last: 'Bob'
			}
	    })
		.directive('myDrtv',function(){
			return {
				restrict: 'A', 
				require: 'ngModel',
				link: function(scope, element, attrs, ngModel) {
					var _ngModel = ngModel;
					//format text going to user (model to view)
				    ngModel.$formatters.push(function(obj) {
						return obj.first;
					});
					//format text from the user (view to model)
					ngModel.$parsers.push(function(value) {
						return value;
				    });
				}
						  
			}
		})

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

	<div ng-app="myApp">
		<div ng-controller="myCtrl">
			Name : <input my-drtv  ng-model="person" type="text"><br>
			{{person.first}}
    	</div>
		
	</div>

我怎样才能更改输入并仍然在{{person.first}} 中看到它？

请不要回答我，请将其更改为 ng-model="person.first" 我正在寻找解决方案 - ng-model="person"

Answer 1

将您的输入更改为以下内容：

<input my-drtv ng-model="person.first" type="text">

他们以你的方式拥有它，你正在破坏 person 并将其从一个对象更改为一个字符串。

编辑：如果您想将名字和姓氏分开，请执行以下操作：

<input my-drtv ng-model="fullname" type="text">

然后在link，观察变化并更新person：

scope.$watch('fullname', function(nv) {
  person.first = extractFirstName(nv);
  person.last = extractLastName(nv);
});

（我让你来提供 extract 函数）。