AngularJs之ngModel中$parsers和$formatters随笔
本文并非完全讲解$parsers和$formatters的基础知识的内容，你还要掌握有关指令的相关知识，以便于你理解下面的内容。 $parsers由input的值，即用户输入的变化都会触发其中的管道函数。它是view值到model值的转换器。model值对应的管道函数中的return值决定。 $formatters则和$parsers的作用相反，它是model值到view值的转化器。其view值由对应的管道函数中的return值决定。并且要注意的一点是，在view中引起的model值的变化并不能触发$formatters中的管道函数，只有在代码中改变model的值才会触发其管道函数。
下面的这段代码，展示的是用户输入触发$parsers中的管道函数，引起model值的变化。和从代码中改变model的值，触发$formatters的管道函数，从而引起view值的变化。
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>parser_uppercase</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module(app,[]);
app.controller(MyCtrl, function($scope){
$scope.name = kobe;
$scope.changeName = function(){
$scope.name = $scope.newName;
}
});
app.directive(myTag, function(){
return {
restrict: A,
require: ngModel,
link: function(scope, ele, attrs, ctrl){
ctrl.$parsers.push(function(value){
value = value.toUpperCase();
return value;
});
ctrl.$formatters.push(function(value){
console.log($formatters方法被调用);
value = value.toUpperCase();
return value;
});
}
}
})
</script>
</head>
<body ng-controller="MyCtrl">
<input type="text" my-tag ng-model="name"/>
<Strong>ModelValue:{
{
name}}</Strong>
<input type="text" ng-model="newName"/>
<button ng-click="changeName()">ChangeName</button>
</body>
</html>
