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>
时间: 2024-08-02 07:43:34

NgModelController: $setViewValue,$render,Formatter, Parser的相关文章

D3js-API介绍【英】

Everything in D3 is scoped under the d3 namespace. D3 uses semantic versioning. You can find the current version of D3 as d3.version. See one of: Behaviors - reusable interaction behaviors Core - selections, transitions, data, localization, colors, e

[easyui] datebox源码阅读. 批注

jquery.datebox.js 文件. (function($){ /** * create date box */ function createBox(target){ var state = $.data(target, 'datebox'); var opts = state.options; //在'onShowPanel'触发时会执行一系列的函数. $(target).addClass('datebox-f').combo($.extend({}, opts, { onShowP

boost-log-库 使用经历

最近想整一个日志库,以前使用过log4cplus,看到了boost推出了1.54版本之后,就开始有了一个log库.这个log看了介绍,之后开始尝试去使用.主要的应用场景是让多个模块(so,dll)使用.场景是一个程序,多个模块,模块是单独的so,打印出来的日志,往同一个文件中输出. 最初的时候,编译的boost库是静态库,编译出来的,多是.a类型文件.当在一个日志模块中出示之后,到另一个模块中去使用,发现boost::log::core::get()获取出来的指针都不一样,但是看代码的时候,他明

EasyUI表单元素总结

一:easyui-textbox 文本框 定义: <input id="<span style="font-size:18px;">inputName</span>" class="easyui-textbox" type="text" /> 取值: $('#inputName').textbox('getText'); 赋值: $('#inputName').textbox('setTex

python模块介绍- google 谷歌搜索引擎python接口

简介 google 模块是谷歌搜索引擎python接口,系用urllib2在google上进行搜索,使用BeautifulSoup进行解释外部封装,非google官方接口. 功能:谷歌搜索引擎python接口 类型:外部模块 当前版本:1.0.5(查看日期2013-12-22) 下载地址: https://pypi.python.org/pypi/google 月下载量:1万左右 平台:跨平台 安装 从https://pypi.python.org/pypi/setuptools下载最新版本的s

saltstack 全面介绍

一.关于salt简介,安装和基本配置 转载自: 来自:http://tech.mainwise.cn/?p=438 说明:salt是一个异构平台基础设置管理工具(虽然我们通常只用在Linux上),使用轻量级的通讯器ZMQ,用Python写成的批量管理工具,完全开源,遵守Apache2协议,与Puppet,Chef功能类似,有一个强大的远程执行命令引擎,也有一个强大的配置管理系统,通常叫做Salt State System. 基本原理: SaltStack 采用 C/S模式,server端就是sa

Jquery给easyui的表单元素赋值,获取值总结

1.Input a. validatebox 定义: <input type="text" name="APPLYDEPTNAME" id="APPLYDEPTNAME" style="width: 99%" maxlength="50" class="easyui-validatebox" data-options="required:true" />

[AngularJS] ngModelController render function

ModelValue and ViewValue: $viewValue: Actual string value in the view. $modelValue: The value in the model that the control is bound to. In Anuglar, it watchs the $modelValue for you and update $viewValue. As you need to tell Angular when you set $vi

Jsoup代码解读之四-parser

Jsoup代码解读之四-parser 作为Java世界最好的HTML 解析库,Jsoup的parser实现非常具有代表性.这部分也是Jsoup最复杂的部分,需要一些数据结构.状态机乃至编译器的知识.好在HTML语法不复杂,解析只是到DOM树为止,所以作为编译器入门倒是挺合适的.这一块不要指望囫囵吞枣,我们还是泡一杯咖啡,细细品味其中的奥妙吧. 基础知识 编译器 将计算机语言转化为另一种计算机语言(通常是更底层的语言,例如机器码.汇编.或者JVM字节码)的过程就叫做编译(compile).编译器(