AngularJs之ngModel中$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 src="https://www.orchome.com/user/js/angular-1.5.8.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><br/><br/>
    <input type="text" ng-model="newName"/>
    <button ng-click="changeName()">ChangeName</button>
</body>
</html>

在线运行

AngularJs之ngModel中$parsers和$formatters

昵称