[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 ...
随机推荐
- .NET之美——C#中的委托和事件(续)
C#中的委托和事件(续) 引言 如果你看过了 C#中的委托和事件 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为 ...
- 只用css实现“每列四行，加载完一列后数据自动填充到下一列”的效果
只用css实现“每列四行,加载完一列后数据自动填充到下一列”的效果.这个题目用图表示如下: 如果将题目换成“只用css实现每行四列,加载完一行后数据自动填充到下一行”,那这个问题就简单多了,相信大家都 ...
- javascript将json转字符串
例如: var last=obj.toJSONString(); //将JSON对象转化为JSON字符 或者 var last=JSON.stringify(obj); //将JSON对象转化为JSO ...
- hdu4561 bjfu1270 最大子段积
就是最大子段和的变体.最大子段和只要一个数组,记录前i个里的最大子段和在f[i]里就行了,但是最大子段积因为有负乘负得正这一点,所以还需要把前i个里的最小子段积存起来.就可以了.直接上代码: /* * ...
- Int.Parse()、Convert.toInt32()和（int）区别
通过网上的查询从而了解了Int.Parse().Convert.toInt32()和(int)区别. 一.定义上的差别 int类型表示一种整型,.NET Framework 类型为 System.In ...
- C ~ 指针函数与函数指针的区别
一. 在学习arm过程中发现这“指针函数”与“函数指针”容易搞错,所以今天,我自己想一次把它搞清楚,找了一些资料,首先它们之间的定义: 1.指针函数是指带指针的函数,即本质是一个函数.函数返回类型是某 ...
- [LeetCode] Container With Most Water 简要分析
前言 这题非要说贪心的话也算是吧,不过最主要的特征还是双指针.LC的题好像不少都是扔倆头尾指针然后遍历一遍完事儿的.这道题倒是“短板效应”的不错体现了. 题目 题目链接 Given n non-neg ...
- Android版本判断
尽管Android向下兼容不好,但是一个程序还是可以在多个平台上跑的.向下兼容不好,接口改变,新的平台上不能用旧的API,旧的平台更不可能用新的API,不等于一个平台需要一个APK.可以在高版本的SD ...
- Java in ACM/ICPC
目录 Java在ACM/ICPC中的特点 在ACM/ICPC中使用Java需要注意的问题 Java与高精度计算 1.Java在ACM/ICPC中的特点 Java的语法和C++几乎相同 Java在执行计 ...
- 微服务、SOA 和 API：是敌是友？
为一个正在不断发展的企业对比关键的集成与应用程序架构概念 对比微服务架构和面向服务的架构(SOA)是一个敏感的话题,常常引起激烈的争论.本文将介绍这些争论的起源,并分析如何以最佳方式解决它们.然后进一 ...