玩转angularJs——通过自定义ng-model,不仅仅只是input可以实现双向数据绑定
体验更优排版请移步原文:http://blog.kwin.wang/programming/angularJs-user-defined-ngmodel.html
angularJs双向绑定特性在开发中很方便很实用,但是由于ng-model一般只能挂在input上,因此我们需要自定义ng-model来在div等元素上使用该标签。
自定义指令:
//自定义ngModel的属性
.directive('contenteditable', ['$window', function() {
return {
restrict: 'A',
require: '?ngModel', // 此指令所代替的函数
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(ngModel.$viewValue || '');
};
// Listen for change events to enable binding
element.on('blur keyup change', function() {
scope.$apply(readViewText);
});
// No need to initialize, AngularJS will initialize the text based on ng-model attribute
// Write data to the model
function readViewText() {
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);
}
}
}
}])
页面中div可以这样使用ng-model:
<div class="icon-arrow-title title-color-2" contenteditable="true" ng-model="param.MobileNum" style="right: 15px;"></div>
这样,双向数据绑定就可以了。
玩转angularJs——通过自定义ng-model,不仅仅只是input可以实现双向数据绑定的更多相关文章
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- angularjs directive (自定义标签解析)
angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...
- 一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好
学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是 ...
- AngularJS中自定义有关一个表格的Directive
本篇体验在AngularJS中自定义一个有关表格的Directive.表格的需求包括: ● 表格结构 <table> <thead> <tr> ...
- angular 中怎么获取路径上的参数 参考:https://docs.angularjs.org/api/ng/service/$location
参考: https://docs.angularjs.org/api/ng/service/$location
- combox使用自定义的model列表中无元素显示
自定义的model(stationModel)中有 name 和point两种属性名. 初始化stationModel Combobox{ textRole: 'name' model:station ...
- 玩转Spring Boot 自定义配置、导入XML配置与外部化配置
玩转Spring Boot 自定义配置.导入XML配置与外部化配置 在这里我会全面介绍在Spring Boot里面如何自定义配置,更改Spring Boot默认的配置,以及介绍各配置的优先 ...
- angularJs:双向数据绑定
示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...
- angularJs初体验,实现双向数据绑定!使用体会:比较爽
使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...
随机推荐
- HDU 1410 PK武林盟主
Problem Description 枫之羽认为自己很强,想当武林盟主,于是找现任武林盟主氢氧化铜挑战.氢氧化铜欣然接受了挑战,两人约好于下个月的月圆之夜在HDU校园内的三根柱子上进行决战.这场PK ...
- 猪齿鱼_01_环境搭建(二)_微服务支撑组件部署(Docker形式)
一.前言 上一节,我们以源码形式部署好了猪齿鱼微服务组件,过程繁琐,且启动后占用了服务器大量的资源,对开发极其不友好.
- 条款20:在传递对象的时候尽量用reference-to-constent来代替,pass-by-value
注意一下,c++的底层编译器而言,引用类型往往都是由指针来实现出来的,所以pass-by-reference实际意义上往往是传递了一个指针,这对于c++的内置类型来说往往传递一个reference更加 ...
- 【git】git知识梳理(一):基本操作&远程控制&分支管理
(一)基本操作: git中所有文件一共有三个状态:已提交,已暂存,已修改. 三个工作区域: git目录:.git文件夹,每次拷贝其实只拷贝git目录 工作目录:文件和目录都是从git目录中压缩对象数 ...
- Lua学习---编译生成lua和luac
众所周知,Lua是一种强大的脚本语言,并且这种语言是用C语言实现的.为什么要学习这门语言?因为它可以增强我看C语言代码的功底. 我下的Lua版本是Lua5.3,关于Lua5.3的简介如下: http: ...
- FFmpeg再学习 -- 视音频基础知识
最近一直在看雷霄骅 FFmpeg 系列视频,然后将自己的理解总结一下. 参看:<基于 FFmpeg + SDL 的视频播放器的制作>课程的视频 一.视频播放器原理 自己理解: 比如一个 M ...
- stringstream 用法
stringstream stringstream 是 C++ 提供的另一个字串型的串流(stream)物件,和之前学过的 iostream.fstream 有类似的操作方式.要使用 stringst ...
- JAVA线程死锁
文件名:DeadThreadByExtend.java 注: 1.起线程的时候用的是start方法,run方法也可以调用,但是仅仅相当于普通调用,在当前线程内执行. 2.synchronized 不能 ...
- HTML5编写规范
HTML和CSS编码规范内容 一.HTML规范 二.CSS规范 三.注意事项: 四.常用的命名规则 五.CSS样式表文件命名 六.文件命名规则 一.HTML规范: 1.代码规范 页面的第一行添加标准模 ...
- HihoCoder 1104 : Suzhou Adventure(树形DP)
Suzhou Adventure 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi is taking an adventure in Suzhou n ...