• 理解 NgModelController 中相关方法和属性


    1. 理解$formatters和$parsers方法

    angular的双向绑定可以实现view和model中的值自动同步,但有时候我们不想让用户输入的(view值)和发送给后台的(model值)并不一样,这时候我们需要额外做些‘手脚’。

    先看下面的例子

    http://plnkr.co/edit/UQ5q5FxyBzIeEjRYYVGX?p=preview

    当在文本框中输入小写字母,model的值实际上返回的是大写字母。

    这是因为$parses会将view中的值进行转换并保存到对应model中。

      //format text from the user (view to model)
      ngModel.$parsers.push(function(value) {
        return value.toLowerCase();
      });

    反之

    如果改变model值,view中实际显示的是经过$formatters格式化后的值。并呈现给用户展示。

    根据例子中,点击按钮无论将model的值设为大写还是小写,view中显示的都是小写字母。是下面的代码再起作用。

    注意:用户交互时并不会触发此方法,当ngModel表达式的值发生变化才会触发。

    总结: formatters() 方法将 $modelValue 转变成 $viewValue 。$parsers 方法将 $viewValue 转化成 $modelValue 。

      //format text going to user (model to view)
      ngModel.$formatters.push(function(value) {
        return value.toUpperCase();
      });

    2. 理解$setViewValue,$viewValue和$render方法

    $render() 方法: 当修改view value的时候被调用。会将$viewValue 渲染到directive template中。

    $setViewValue(value, trigger)方法: 该方法用来更新视图值。这个方法应该在一个视图值发生变化时被调用,一般来说是在一个DOM事件处理函数中。

    例如,input和select指令就调用了这个函数。 这个方法将会更新$viewValue属性,然后在$pasers中通将这个值传递给每一个函数,其中包括了验证器。这个值从$parsers输出后,将会被用于$modelValue以及ng-model属性中的表达式。

    最后,所有位于$viewChangeListeners列表中注册的监听器将会被调用。

    参考:

    http://stackoverflow.com/questions/22841225/ngmodel-formatters-and-parsers

    https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

    http://blog.gejiawen.com/2015/12/20/using-ng-model-controller-with-angular-directive

    http://sentsin.com/web/659.html

  • 相关阅读:
    .Net缓存管理框架CacheManager
    .Net Attribute详解(下)
    .Net Attribute详解(上)-Attribute本质以及一个简单示例
    使用Web.Config Transformation配置灵活的配置文件
    Lazy<T>在Entity Framework中的性能优化实践(附源码)
    菜鸟程序员之Asp.net MVC Session过期异常的处理
    Windows下查看端口占用
    MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息
    如何恢复Mysql数据库
    Entity Framework做IN查询
  • 原文地址:https://www.cnblogs.com/mafeifan/p/6743056.html
Copyright © 2020-2023  润新知