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的更多相关文章

  1. New UWP Community Toolkit - Markdown

    概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 MarkdownTextBlock 和 MarkdownDoc ...

  2. D3js-API介绍【英】

    Everything in D3 is scoped under the d3 namespace. D3 uses semantic versioning. You can find the cur ...

  3. easyui扩展-日期范围选择.

    参考: http://www.5imvc.com/Rep https://github.com/dangrossman/bootstrap-daterangepicker * 特性: * (1)基本功 ...

  4. [easyui] datebox源码阅读. 批注

    jquery.datebox.js 文件. (function($){ /** * create date box */ function createBox(target){ var state = ...

  5. easy ui 给表单元素赋值input,combobox,numberbox

    ①给input控件 class="easyui-textbox" <input class="easyui-textbox" data-options=& ...

  6. easyui源码翻译1.32--DateTimeBox(日期时间输入框)

    前言 扩展自$.fn.datebox.defaults,使用$.fn.datetimebox.defaults重写默认值对象.下载该插件翻译源码 和日期输入框类似,日期时间输入框允许用户选择日期和指定 ...

  7. angular2 学习笔记 ( Form 表单 )

    refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...

  8. 自定义EasyUI的datetimebox控件日期时间的显示格式(转)

    工作中遇到的问题,在此记录一下. 需求:前台页面使用了EasyUI框架,在某一个html页面中要求datetimebox显示格式为年月日和小时,如图所示: 尝试过两种方法,分别如下: 第一种方法: d ...

  9. C++_day8pm_多态

    1.什么是多态 2. 示例代码: #include <iostream> using namespace std; //形状:位置.绘制 //+--圆形:半径.(绘制) //+--矩形:长 ...

随机推荐

  1. storm(3)-本机模式-helloworld

    pom.xml <dependency> <groupId>org.apache.storm</groupId> <artifactId>storm-c ...

  2. Vue生命周期钩子详解【个人解读】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. IIS进程池异常崩溃,导致网站 service unavailable,原因排查与记录。

    昨晚十点钟的样子,网站崩溃,开始 service unavailable,最近开始业务高峰,心里一惊,麻痹肯定进程池又异常崩溃了.又碰到什么问题?上次是因为一个异步线程的问题,导致了进程池直接崩溃,后 ...

  4. javascript DOM相关语法

    childNodes: 获取元素内的所有节点 包括文本节点:nodeType=3 , 元素节点:nodeType = 1 nodeType:它可以判断所有节点的类型 元素节点类型:1 文本节点:3 注 ...

  5. eclipse中点不出方法的解决办法

    window-preferences-java-editor-Content Assist-Advanced 然后选中右上方的所有 右下方选中一个即可.

  6. android 小工具:pc 上用 curl 命令打开手机浏览器,浏览指定网址

    测试 API 时或其它情况经常需要在手机浏览器中输入 url 一长串的 url 输起来真是麻烦 AirDroid 很强大也不用数据线,但有时老断开连接,不是很爽.发到手机 qq 吧还得手动粘贴 所以自 ...

  7. c# 实现RPC框架的思路

    RPC框架,就是远程调用一个方法就像是本地调用一样. 用于网络消息的话,那么你的收发消息通过异步方法可以写在一起,很方便 核心代码 using System; using System.Collect ...

  8. jQuery 自定义方法(扩展方法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 周记3——解决fixed属性在ios软键盘弹出后失效的bug

    这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...

  10. ASP.NET能知道的东西

    ASP.NET能知道的东西 获取服务器电脑名: Page.Server.ManchineName 获取用户信息: Page.User 获取客户端电脑名:Page.Request.UserHostNam ...