我已经与angularjs一起工作了好几个星期，但是当从ngModelController设计$ viewValue和$ modelValue功能时，我并没有得到angularjs设计师的想法。代码示例：
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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句