从模糊事件更新模型的最佳方法是什么？
从模糊事件更新模型的最佳方法是什么？
提问于 2015-02-25 23:34:20
我的目标是创建一个名为"myphone“的Angular指令，只需添加此属性即可在输入字段上执行美国电话号码验证和格式化。我希望验证在键入数据时发生，但我希望在字段失去焦点时进行格式化。格式化的电话号码在提交表单时发送。我花了一些时间，想出了下面所示的解决方案，我相信它可以像预期的那样工作。
不过，我有几个问题：
(1)我应该在验证器中检查modelValue或viewValue吗？在这种情况下，它们总是看起来是相同的，所以我猜这并不重要，但我怀疑其中一个是一个“更好”的选择。
(2)从模糊事件更新模型的最佳方法是什么？我想出了scope[ ctrl.$name ] = tel，但我怀疑这不是一个很好的方法。好的--这不是做这件事的方式。显然我应该使用$parse。
(3)我最初的方法是创建一个格式化程序。似乎格式化程序只在字段初始填充时调用，而我不知道如何从blur事件调用格式化程序。这是一种更好的方法吗？如果是这样，我如何从blur事件调用格式化程序？
谢谢!
<!DOCTYPE html>
<html lang="en">
<head><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script></head>
<body>
<form name=form novalidate ng-app="app">
<label>Phone</label>
<input name=phone ng-model="phone" myphone>
<span ng-show="form.phone.$dirty && form.phone.$invalid">Invalid phone.</span>
</form>
<script>
var app = angular.module( 'app', [ ] );
app.directive( 'myphone', [ '$parse', function( $parse )
{
return {
restrict: 'A',
require: 'ngModel',
link: function( scope, elm, attrs, ctrl ) {
ctrl.$validators.myphone = function( modelValue, viewValue ) {
if ( !angular.isString( modelValue ) || !modelValue.length ) return true;
/* Accept a 10 digit phone number. Ignore leading "1" if present. */
var pattern = new RegExp( /^1?[2-9][0-8]\d[2-9]\d{6}$/ );
/* Ignore non-digits */
return pattern.test( viewValue.replace( /[^0-9]/g, '' ) );
};
elm.bind( 'blur', function( ) {
scope.$apply( function ( ) {
var tel = $parse( attrs.ngModel )( scope );
if ( angular.isString ( tel ) ) {
/* Remove non-digits */
tel = tel.replace( /[^0-9]/g, '' );
tel = tel.replace( /^(?:1?)([2-9][0-8]\d)([2-9]\d{2})(\d{4})$/, '($1) $2-$3' );
$parse( attrs.ngModel ).assign( scope, tel );
}
} )
} );
}
};
} ] );
</script>
</html>http://plnkr.co/edit/N0pNucY1SyhEc9JHfcB4
回答 1
Stack Overflow用户
发布于 2015-02-25 23:46:12
试试angular提供的ng-model-options指令。有关更多信息，请访问：https://docs.angularjs.org/api/ng/directive/ngModelOptions
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28723032
复制相关文章
相似问题
腾讯云开发者
