[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 ...
随机推荐
- 无人机DLG生产作业流程
参考文章 无人机(AVIAN)低空摄影测量作业流程 无人机低空遥感测绘作业流程及主要质量控制点 微型无人机低空摄影测量系 无人机航空摄影测量系统引进与发展 基于复杂地形的无人机航摄系统1∶500 DL ...
- linux 用 SSH2协议远程连接并控制 linux
[参考链接](http://php.net/manual/zh/ssh2.installation.php) ssh2_exec 并不能打印所有的命令的提示信息 如果有返回的字符串信息,可以打印,或重 ...
- User experience
User experience 以用户为中心, --通过简单的操作快速完成美好的任务 简单 聚焦,我在干什么?我接下来要干什么? 删除.隐藏,合并.分组 使用背景色,而非边框来划分区域 碎片化,电话不 ...
- bzoj 2186 [Sdoi2008]沙拉公主的困惑（欧拉函数，逆元）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2186 [题意] 若干个询问,求1..n!中与m!互质的个数. [思路] 首先有gcd( ...
- CreateThread函数&&CString::GetBuffer函数
对这个两个常见的windows下的函数学习了一下: //最简单的创建多线程实例 #include <stdio.h> #include <windows.h> //子线程函数 ...
- Tkinter教程之Scrollbar篇
本文转载自:http://blog.csdn.net/jcodeer/article/details/1811319 '''Tkinter教程之Scrollbar篇'''#Scrollbar(滚动条) ...
- 自定义Camera综述（一般步骤、注意事项、遇到的难题<【内存溢出问题】>、像素参考）
一般步骤: 1. 检查和访问Camera:创建代码来检查Camera和所申请访问的存在性: 2. 创建一个预览类:继承SurfaceView来创建一个Camera的预览类,并实现SurfaceHold ...
- 恒天云单节点部署指南--OpenStack H版本虚拟机单节点部署解决方案
本帖是openstack单节点在虚拟机上部署的实践.想要玩玩和学习openstack的小伙伴都看过来,尤其是那些部署openstack失败的小伙伴.本帖可以让你先领略一下openstack的魅力.本I ...
- 树莓派使用8188eu无线网卡
#已经集成了8188eu驱动的镜像 http://cassidy.pi3g.com/rpi_images/raspbian-wifi-fix130523.7z #需要修改的信息 sudo nano / ...
- HDU-4726 Kia's Calculation 贪心
题目链接:http://acm.hdu.edu.cn/userstatus.php?user=zhsl 题意:给两个大数,他们之间的加法法则每位相加不进位.现在可以对两个大数的每位重新排序,但是首位不 ...