NgModelController: $setViewValue,$render,Formatter, Parser
NgModelController为ngModel directive提供了API。这个controller包含了关于data-binding,validation,css update, value formatting and parsing的相关service.该controller本意上设计不包含任何处理DOM渲染或者侦听DOM events的逻辑。这些DOM相关的逻辑应该由其他使用ngModelController做databinding的directive来完成。Angular为几乎所有的input elements提供这个DOM逻辑。
$render()
该函数在当view需要更新时调用,一般预期ng-modle的使用者需要实现这个方法:
$setViewValue(value, trigger)
该函数用于更新view的value,当需要变更view values时,需要调用该方法。典型地,这个函数由DOM的事件处理函数来调用。比如,一个input directive在当它的input变更时就会调用$setViewValue,再比如:select控件在当一个option被选择时也会调用这个函数更新view value。
注意,当$setViewValue被调用时,新的value将会被staged,通过$parsers,$validators管道检查后被commit到view中。
$parsers
这是ngModelController提供的一个函数指针数组,它将作为一个pipeline,当控件从DOM读取value(由$viewVlaue缓存)时,这个$parsers数组中的所有函数将一个一个地执行。当顺序执行完毕后返回的value被传给$validators函数数组来做vaildation。如果parse发生错误,那么undefined将被返回。
$formatters
$formatters将包含一个作为pipeline的函数数组,在model value变更时被调用。这些函数将被反序调用,每个函数将其返回值传递给下一个函数。最后一个函数的输出作为实际的DOM value($viewValue)
该函数用于format/convert values for display in the control
function formatter(value) {
if (value) {
return value.toUpperCase();
}
}
ngModel.$formatters.push(formatter);
$validators
这是一个当model value变更时将会被调用的validator集合。
ngModel.$validators.validCharacters = function(modelValue, viewValue) {
var value = modelValue || viewValue;
return /[0-9]+/.test(value) &&
/[a-z]+/.test(value) &&
/[A-Z]+/.test(value) &&
/\W+/.test(value);
};
综合示例:
app.directive('changeCase', function(){
return{
restrict: 'A',
templateUrl: 'scripts/directives/directive_templates/directive.html',
require: 'ngModel',
link: function(scope, element, attr, ngModel){
ngModel.$formatters.push(function(value){
value.toUpperCase();
return value;
});
ngModel.$parsers.push(function(value){
value.toUpperCase();
return value;
});
}
};
});
<form role="form" name="myform">
<div class="form-group">
<label>View Value:</label>
<input name="someinput" changecase="" ng-model="some_letters.value">
</div>
</form>
<strong>ModelValue:</strong> <br>
NgModelController: $setViewValue,$render,Formatter, Parser的更多相关文章
- New UWP Community Toolkit - Markdown
概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 MarkdownTextBlock 和 MarkdownDoc ...
- D3js-API介绍【英】
Everything in D3 is scoped under the d3 namespace. D3 uses semantic versioning. You can find the cur ...
- easyui扩展-日期范围选择.
参考: http://www.5imvc.com/Rep https://github.com/dangrossman/bootstrap-daterangepicker * 特性: * (1)基本功 ...
- [easyui] datebox源码阅读. 批注
jquery.datebox.js 文件. (function($){ /** * create date box */ function createBox(target){ var state = ...
- easy ui 给表单元素赋值input,combobox,numberbox
①给input控件 class="easyui-textbox" <input class="easyui-textbox" data-options=& ...
- easyui源码翻译1.32--DateTimeBox(日期时间输入框)
前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 和日期输入框类似,日期时间输入框允许用户选择日期和指定 ...
- angular2 学习笔记 ( Form 表单 )
refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...
- 自定义EasyUI的datetimebox控件日期时间的显示格式(转)
工作中遇到的问题,在此记录一下. 需求:前台页面使用了EasyUI框架,在某一个html页面中要求datetimebox显示格式为年月日和小时,如图所示: 尝试过两种方法,分别如下: 第一种方法: d ...
- C++_day8pm_多态
1.什么是多态 2. 示例代码: #include <iostream> using namespace std; //形状:位置.绘制 //+--圆形:半径.(绘制) //+--矩形:长 ...
随机推荐
- es第三篇:Search APIs
大多数search API都是可以操作多个索引的,除了explain API. 当执行一个search API时,可以指定routing参数,去搜索特定的主分片及其副本分片.routing参数值可以是 ...
- lua-redis-parser module
https://github.com/openresty/lua-redis-parser 此模块主要是处理redis请求和响应的. local parser = require "redi ...
- 如何使用新的glibc来编译自己的程序
http://www.sysnote.org/2015/08/25/use-new-glibc/ 通常情况下我们都是直接使用glibc提供的一些库函数,但是某些特殊的情况,比如要修改glibc的一些代 ...
- nginx文件访问403问题
配置测试环境nginx时,增加了一个新的用户用来上传资源,所以想着就直接把静态资源放在新用户的home目录.为此,还特地设置了相应目录的所有用户都可以读取. chmod 755 /home/tom/s ...
- 解决display none到display block 渲染时间过长的问题,以及bootstrap模态框导致其他框中input不能获得焦点问题的解决
在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...
- MySql的数据目录
数据目录的位置 MySQL数据目录的默认位置已经被编译到MySQL服务器程序里了. 在启动服务器时,通过使用一个--datadir=dir_name选项可以明确指定数据目录位置.把MySQL数据目录安 ...
- poj 3748 位操作
位操作 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8856 Accepted: 3535 Description 假 ...
- 移动端rem适配屏幕
九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...
- 在 Azure WebApps 中运行64位 Asp.net Core 应用
作为微软下一代的开源的跨平台的开发框架, Asp.net core 正在吸引越来越多的开发者基于其构建现代 web 应用. 目前, Azure App Service 也实现了对 asp.net co ...
- C# Winform软件多语言(汉语、英语。。。)界面的切换,低耦合
Winform软件多语言切换,个人见解,降低软件对语言展示的耦合度. 1.设计图(自己瞎画的呵呵) 2.做的小demo,界面如下 3.下面是代码展示部分 1)Form1代码展示 namespace W ...