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 $viewValue and apply render() function to update.

Before the $render() function is called, the value will be passed into the $formatters.

$formatters: Array of functions to execute, as a pipeline, whenever the model value changes. The functions are called in reverse array order, each passing the value through to the next.

function formatter(value) {

  if (value) {

    return value.toUpperCase();

  }

}

ngModel.$formatters.push(formatter);

Example:

/**

 * Created by Answer1215 on 12/18/2014.

 */

angular.module('app', [])

    .directive('bank', function($filter) {

        return{

            restrict: 'E',

            template: '<div>Click me to add $10 into your account</div>',

            require: 'ngModel',

            //The ^ prefix means that this directive searches for the controller on its parents (without the ^ prefix, the directive would look for the controller on just its own element)

            link: function(scope, element, attrs, ngModelCtrl) {

                /*

                ngModelCtrl.$formatters.push(function(modelValue) {

                    return "$" + modelValue;

                });*/

                //formatter is called before the render

                ngModelCtrl.$formatters.push($filter('currency'));

                //$render function require user to implement it

                ngModelCtrl.$render = function() {

                    element.text('Now you have: ' + ngModelCtrl.$viewValue);

                }

            }

        }

    })
<!DOCTYPE html>

<html ng-app="app">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div ng-init="money=10"></div>

<bank ng-model="money"></bank><br/>

<input type="text" ng-model="money" /><button type="reset" ng-click="money=0">Reset</button>

<script src="bower_components/angular/angular.min.js"></script>

<script src="app.js"></script>

</body>

</html>

$rollbackViewValue(): Cancel an update and reset the input element's value to prevent an update to the $modelValue, which may be caused by a pending debounced event or because the input is waiting for a some future event.

If you have an input that uses ng-model-options to set up debounced events or events such as blur you can have a situation where there is a period when the $viewValue is out of synch with the ngModel's $modelValue.

In this case, you can run into difficulties if you try to update the ngModel's $modelValue programmatically before these debounced/future events have resolved/occurred, because Angular's dirty checking mechanism is not able to tell whether the model has actually changed or not.

The $rollbackViewValue() method should be called before programmatically changing the model of an input which may have such events pending. This is important in order to make sure that the input field will be updated with the new model value and any pending operations are cancelled.

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

$sec service: We are using the $sce service here and include the $sanitize module to automatically remove "bad" content like inline event listener (e.g.<span onclick="...">). However, as we are using $sce the model can still decide to provide unsafe content if it marks that content using the $sce service.

angular.module('customControl', ['ngSanitize']).

directive('contenteditable', ['$sce', function($sce) {

  return {

    restrict: 'A', // only activate on element attribute

    require: '?ngModel', // get a hold of NgModelController

    link: function(scope, element, attrs, ngModel) {

      if (!ngModel) return; // do nothing if no ng-model

      // Specify how UI should be updated

      ngModel.$render = function() {

        element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));

      };

      // Listen for change events to enable binding

      element.on('blur keyup change', function() {

        scope.$evalAsync(read);

      });

      read(); // initialize

      // Write data to the model

      function read() {

        var html = element.html();

        // When we clear the content editable the browser leaves a <br> behind

        // If strip-br attribute is provided then we strip this out

        if ( attrs.stripBr && html == '<br>' ) {

          html = '';

        }

        ngModel.$setViewValue(html);

      }

    }

  };

}]);

[AngularJS] ngModelController render function的更多相关文章

  1. template or render function not defined vue 突然报错了，怎么解决

    报错图例如下:template or render function not defined vue 突然报错了,怎么解决什么错误呢,就是加载不出来,网上看了一通,是vue版本不对,是vue-comp ...

  2. Failed to mount component: template or render function not defined.

    Failed to mount component: template or render function not defined. vue-loader13.0有一个变更就是默认启用了esModu ...

  3. vue render function & dataset

    vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...

  4. [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的问题Error in render function

    1.[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined 注意,只要出现Error i ...

  5. "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决

    VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...

  6. vue h render function & render select with options bug

    vue h render function & render select with options bug https://github.com/xgqfrms/vue/issues/41 ...

  7. vue render function

    vue render function https://vuejs.org/v2/guide/render-function.html { // Same API as `v-bind:class`, ...

  8. template or render function not defined.

    template or render function not defined. H_婷 关注 2018.08.16 17:22 字数 106 阅读 3859评论 0喜欢 2 下午写 Vue $par ...

  9. [Vue @Component] Control Template Contents with Vue's Render Function

    Declaring templates and elements inside of templates works great for most scenarios. Sometimes you n ...

随机推荐

  1. 解决：Unable to connect to repository https://dl-ssl.google.com/android/eclipse/site.xml

    ailed to fectch URl https://dl-ssl.google.com/android/repository/addons_list.xml, reason: Connection ...

  2. DbHelper第三版, 数据库通吃

    using System;using System.Collections;using System.Data;using System.Data.Common;using System.Config ...

  3. 写给Python初学者的设计模式入门

    有没有想过设计模式到底是什么?通过本文可以看到设计模式为什么这么重要,通过几个Python的示例展示为什么需要设计模式,以及如何使用. 设计模式是什么? 设计模式是经过总结.优化的,对我们经常会碰到的 ...

  4. JQuery笔记：JQuery和JavaScript的联系与区别

    来源:http://www.ido321.com/1019.html ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM ...

  5. 网站繁简切换的JS遇到的一个BUG

    公司打算进入台湾市场,最近开发了繁体版本的网站,数据库里的信息全是简体,除了网页上固定的文字手动翻译了,文章内容标题都不是繁体. 于是在网上找了一段比较流行的繁简切换的JS实现了,不过后来却发现,有些 ...

  6. Backbone.js developer 武汉 年薪8w-10w

    1.   精通Backbone.js 2.   熟练Ajax.NoSQL.RESTful APIs 3.   了解Pusher.com和 Parse.com 4.   具有良好的沟通能力,学习能力,敬 ...

  7. 时间都去哪了？——安卓GTD工具

    GTD是英文Getting Things Done的缩写,是一种行为管理的方法,也是David Allen写的一本书的书名. GTD的主要原则在于一个人需要通过记录的方式把头脑中的各种任务移出来.通过 ...

  8. ubuntu openstack packaages

  9. codeforces 630D Hexagons!

    D. Hexagons! time limit per test 0.5 seconds memory limit per test 64 megabytes input standard input ...

  10. HDU 1078 FatMouse and Cheese (记忆化搜索)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1078 老鼠初始时在n*n的矩阵的(0 , 0)位置,每次可以向垂直或水平的一个方向移动1到k格,每次移 ...