AngularJs之ngModel中$parsers和$formatters随笔

最新推荐文章于 2024-03-04 15:45:00 发布

zhu jun~

最新推荐文章于 2024-03-04 15:45:00 发布

阅读量4.3k

点赞数 2

文章标签： parsers formatters angularjs

本文链接：https://blog.csdn.net/zhujun_xiaoxin/article/details/54928850

版权

本文并非完全讲解$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>

zhu jun~

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AngularJs之ngModel中$parsers和$formatters随笔

本文并非完全讲解parsers和parsers和formatters的基础知识的内容，你还要掌握有关指令的相关知识，以便于你理解下面的内容。 parsers由input的值，即用户输入的变化都会触发其中的管道函数。它是view值到model值的转换器。model值对应的管道函数中的return值决定。parsers由input的值，即用户输入的变化都会触发其中的管道函数。它是view值到model
复制链接

扫一扫