我已经使用 AngularJS 工作了几个星期了，我不明白 AngularJS 设计者在设计 ngModelController 中的 $viewValue 和 $modelValue 功能时的想法。 。代码示例:
index.html:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.18/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="PlunkerApp" ng-controller="mainController">
<listfield ng-model="termList"></listfield>
</body>
</html>
script.js:
var plunkerModule = angular.module('PlunkerApp', []);
plunkerModule.directive('listfield', function() {
'use strict';
var link = function(scope, element, attrs, ngModelController) {
console.log('listfield.link():', scope);
ngModelController.$parsers.push(function(value) {
console.log('listfield.model.parser:', value);
return value ? value.join(', ') : undefined;
});
ngModelController.$formatters.push(function(value) {
console.log('listfield.model.formatter:', value);
return value ? value.split(/,\s*/) : undefined;
});
}
return {
restrict: 'E',
link: link,
require: 'ngModel',
scope: {
ngModel: '='
},
template: '<input type="text" ng-model="ngModel">'
};
});
plunkerModule.controller('mainController', function($scope) {
$scope.termList = "";
$scope.$watchCollection('termList', function(newValue, oldValue) {
console.log('mainController.watch.list:', newValue);
});
});
骗子链接: http://plnkr.co/edit/T5a8zEQuRyYWnpsZZV9W?p=preview
因此，在这个应用程序中，指令输入元素的值被写入全局范围，这工作得很好!我的问题是，我对“原始”字符串值不感兴趣，我想要由格式化程序生成的数组，但输入元素仍应显示字符串值。
我怎样才能做到这一点？
期待您的答复。
最佳答案
这里的问题是你的 <input>和你的<listfield>标签有一个 ngModel，这会让人混淆何时调用哪个。您可以使用 replace: true您的指令的选项可删除 <listfield>标记并仅适用于 <input> ，像这样:
var plunkerModule = angular.module('PlunkerApp', []);
plunkerModule.directive('listfield', function() {
'use strict';
var link = function(scope, element, attrs, ngModelController) {
console.log('listfield.link():', scope);
// Your formatters and parsers seemed to be the other way around
// The formatter transforms Model -> View
// Whereas the parser transforms View -> Model
ngModelController.$formatters.push(function(value) {
console.log('listfield.model.formatter:', value);
return value ? value.join(', ') : undefined;
});
ngModelController.$parsers.push(function(value) {
console.log('listfield.model.parser:', value);
return value ? value.split(/,\s*/) : undefined;
});
}
return {
restrict: 'E',
link: link,
require: 'ngModel',
replace: true, // Removes the <listfield> tag
scope: {
model: '='
},
template: '<input type="text" ng-model="model">'
};
});
plunkerModule.controller('mainController', function($scope, $timeout) {
$scope.termList = [1,2,3]
$scope.$watchCollection('termList', function(newValue, oldValue) {
console.log('mainController.watch.list:', newValue);
});
$timeout(function changeTermList() { $scope.termList = [4,5,6]}, 2000)
// This is to demonstrate the binding used via the isolate scope(=)
});
以及相关的 HTML:
<body ng-app="PlunkerApp" ng-controller="mainController">
<listfield model="termList"></listfield>
</body>
关于javascript - 使用 AngularJS 中的指令将对象存储在 ngModel 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25380134/