• 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>
  • 相关阅读:
    跨域(cross-domain)访问 cookie (读取和设置)
    实用的PHP正则表达式
    Leetcode:find_minimum_in_rotated_sorted_array
    spring Jdbc自己主动获取主键。
    《学习opencv》笔记——矩阵和图像操作——cvSetIdentity,cvSolve,cvSplit,cvSub,cvSubS and cvSubRS
    HTML5 input placeholder 颜色 改动
    Java面试宝典2014版
    Go语言 关于go error处理风格的一些讨论和个人观点(上)
    动静结合学内核:linux idle进程和init进程浅析
    【Bootstrap3.0建站笔记二】button可下拉弹出层
  • 原文地址:https://www.cnblogs.com/kidsitcn/p/4783355.html
Copyright © 2020-2023  润新知