[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 $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的更多相关文章
- template or render function not defined vue 突然报错了，怎么解决
报错图例如下:template or render function not defined vue 突然报错了,怎么解决什么错误呢,就是加载不出来,网上看了一通,是vue版本不对,是vue-comp ...
- Failed to mount component: template or render function not defined.
Failed to mount component: template or render function not defined. vue-loader13.0有一个变更就是默认启用了esModu ...
- vue render function & dataset
vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...
- [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 ...
- "[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 ...
- 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 ...
- vue render function
vue render function https://vuejs.org/v2/guide/render-function.html { // Same API as `v-bind:class`, ...
- template or render function not defined.
template or render function not defined. H_婷 关注 2018.08.16 17:22 字数 106 阅读 3859评论 0喜欢 2 下午写 Vue $par ...
- [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 ...
随机推荐
- kettle实现文本文件数据抽取方法
KETTLE做调度的思路是,把一个有特定格式的的文本文件,写入ORACLE数据库表, 具体方法见如下操作: 首先来看下文本文件的内容: 1|test1 2|test2 3|test3 通过|进行分割的 ...
- IOS 弹出式 POPMenuView
//MenuView.h // // MenuView.h // RockPopMenu // // Created by zhuang chaoxiao on 14-6-26. // C ...
- Fitnesse启动参数与配置
Fitnesse最新版20140630默认启动后,网页风格与 fitnesse.org 的Bootstrap风格完全不一致. 需要配置plugins.properties中的Theme=bootstr ...
- BBED的安装
BBED是Block Browser EDitor的缩写,只有linux/unix版本,没有windows版本. 11g中默认是不带bbed的,如果要使用,可以在10g中拷贝过来,然后再进行编译使用. ...
- 高性能、高容错、基于内存的开源分布式存储系统Tachyon的简单介绍
Tachyon是什么? Tachyon是一个高性能.高容错.基于内存的开源分布式存储系统,并具有类Java的文件API.插件式的底层文件系统.兼容Hadoop MapReduce和Apache Spa ...
- Hadoop异常处理 Bad connect ack with firstBadLink (No route to host )
[root@Node1 ~]# hdfs dfs -put /home/test.txt /lab/input15/04/15 17:29:44 INFO hdfs.DFSClient: Except ...
- Codevs No.3147 矩阵乘法2
2016-06-01 17:33:30 题目链接: 矩阵乘法2 (Codevs No.3147) 题目大意: 给定两个大小相同的正方形矩阵A,B.多次询问,每次求乘后矩阵的一个子矩阵所有元素的和. 解 ...
- JDBC学习笔记(10)——调用函数&存储过程
如何使用JDBC调用存储在数据库中的函数或存储过程: * 1.通过COnnection对象的prepareCall()方法创建一个CallableStatement * 对象的实例,在使用Con ...
- POJ 1287 Networking （最小生成树）
Networking 题目链接: http://acm.hust.edu.cn/vjudge/contest/124434#problem/B Description You are assigned ...
- CodeForces 707C Pythagorean Triples (数论)
题意:给定一个数n,问你其他两边,能够组成直角三角形. 析:这是一个数论题. 如果 n 是奇数,那么那两边就是 (n*n-1)/2 和 (n*n+1)/2. 如果 n 是偶数,那么那两边就是 (n/2 ...