AngularJs之ngModel中$parsers和$formatters随笔

2024-04-27 15:15:00

字体：大中小

来源：转载

供稿：网友

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

上一篇：&lt;img&gt;标签链接失效显示默认图片

下一篇：JavaScript 本地图片预览

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注