[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 ...
随机推荐
- 【转】简单内存泄漏检测方法 解决 Detected memory leaks! 问题
我的环境是: XP SP2 . VS2003 最近在一个项目中,程序退出后都出现内存泄漏: Detected memory leaks! Dumping objects -> {98500} n ...
- 《C++ primer》--第12章
习题12.7 什么是封装?为什么封装是有用的? 解答: 封装是一种将低层次的元素组合起来形成新的.高层次实体的技术.例如,函数是封装的一种形式:函数所执行的细节行为被封装在函数本身这个更大的实体中:类 ...
- 转载：C语言的谜题
转载:http://coolshell.cn/articles/945.html 这几天,本站推出了几篇关于C语言的很多文章如下所示: 语言的歧义 [酷壳链接] [CSDN链接] 谁说C语言很简单? ...
- JDBC中DAO事务函数模版
DAO事物函数模版1: public void OrderFinsByPage(){ Connection conn = null; PreparedStatement pstmt = null; R ...
- 当rsync遇到非默认端口的ssh
在使用rsync使用ssh协议,来同步远程文件的方法,rsync -zvrtopg -e ssh但是如果遇到ssh不是22端口的时候使用rsync -zvrtopg -e ‘ssh -p 端口’特别是 ...
- 关于python的import
在软件包里,必须添加__init__.py文件. 想要对外公开的module必须在__init__.py内import一次,这样这些module才能被外部代码import并调用.
- QTREE系列题解
打了快一星期的qtree终于打完了- - (其实还有两题改不出来弃疗了QAQ) orz神AK一星期前就虐完QTREE 避免忘记还是简单写下题解吧0 0 QTREE1 题意: 给出一颗带边权树 一个操作 ...
- openstack domain serverID connect uri
- homework09-虐心的现程设终于要告一段落了
V3.0版本今天凌晨出炉 添加了随机生成 添加了文件打开 完全按照老师的要求搞定了 V2.0版本更新 添加了中间数组变量显示 这次作业写了整整一天,把以前能用的代码都改了一个遍 最后变成了网页版的小程 ...
- Red5源代码分析 - 关键类及其初始化过程
原文地址:http://semi-sleep.javaeye.com/blog/348768 Red5如何响应rmpt的请求,中间涉及哪些关键类? 响应请求的流程如下: 1.Red5在启动时会调用RT ...