AngularJS初涉之$parsers与$formatters、$apply与$digest

xiaoxiao2021-02-28  93

$parsers与$formatters:

当用户同控制器进行交互,并且ngModelController中的$setViewValue()方法被调用时,$parsers数组中的函数会以流水线的形式被逐个调用。

第一个$parser被调用后,执行结果递给第二个$parse,以此类推。

这些函数可以对输入值进行转换,或者通过$setValidity()函数设置表单的合法性。

每个$parser返回的值都会被传入下一个$parser中。如果不希望数据模型发生更新undefined。

使用$parser数组可以自定义验证的途径之一。例如,假设我们想要确保输入$parsers由input的值,即用户输入的变化都会触发

其中的管道函数。它是view值到model值的转换器。model值对应的管道函数中的return值决定$formatters则和$parsers的作用相反,

它是model值到view值的转化器其view值由对应的管道函数中的return值决定。并且要注意的一点是,在view中引起的model值的变

化并不能触发$formatters中的管道函数,只有在代码中改变model的值才会触发其管道函数。值在某两个数值之间,可以在$parsers

数值中入栈一个新的函数,这个函数会在验证链中被调用。

下面的这段代码,展示的是用户输入触发$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> 原文链接:http://blog.csdn.net/zhujun_xiaoxin/article/details/54928850

$apply与$digest:

http://blog.csdn.net/dm_vincent/article/details/38705099

转载请注明原文地址: https://www.6miu.com/read-31148.html

最新回复(0)