指令-arContentedit-可编辑的高度自适应的div
<div ar-contentedit="true" contenteditable="true" contenteditable="plaintext-only" class="form-control textareaResize whiteSpace " ></div>
/**
* by luo.chunxiang@eisoo.com-2016-10-26
*/ define(function (require) { require('ui/modules')
.get('kibana')
.directive('arContentedit', function () {
return {
restrict: 'A', // 只用于属性
require: '?ngModel', // get a hold of NgModelController
link: function (scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
// Specify how UI should be updated
ngModel.$render = function () {
element.text(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.text();
// 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);
}
}
};
});
});
指令-arContentedit-可编辑的高度自适应的div的更多相关文章
- 高度自适应的div
需求:有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度 1.用flex 来实现 思路:flex 垂直布局(column),第一个元素固定高度,第二个元素flex ...
- 四种方法解决DIV高度自适应问题
本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flex布局嵌套之高度自适应
查遍各大资源无任何flex嵌套布局的例子,经过自己折腾完成了项目中的高度自适应需求(更多应用于前端组件) 效果图: html代码:(关键地方已经用颜色特别标识 ^_^) <!DOCTYPE ht ...
- div仿textarea使高度自适应
今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...
- uitableviewcell高度自适应笔记
今天看了几篇uitableviewcell高度自适应的文章,大体分为两种方式. 第一种方式,cell里面有label,在cellforrow绘制的时候计算Label的可能高度,并且在此时重新计算cel ...
- textarea高度自适应问题
textarea中的文字如果过多,就会产生滚动条,一本分文本被遮盖住,不能看到所有的文本. 那么,如何才能让textarea的高度随输入内容多少,可以自动的改变高度呢? 解决思想: 1 利用conte ...
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...
- textarea如何实现高度自适应?
今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时, ...
随机推荐
- WPF基础篇之资源文件路径
WPF资源文件的路径 关于WPF资源文件的路径 这几天在WPF中调用资源文件的Uri时,因为是在代码里调用Uri写的Uri总是不对,要么运行直接报异常,要么说找不到资源文件.下面是我解决的整个经过和碰 ...
- [Luogu2463][SDOI2008]Sandy的卡片
BZOJ权限题qwq Luogu sol "两个子串长度相同且一个串的全部元素加上一个数就会变成另一个串" 其实就是差分一波以后完全相同 所以对输入的数据进行差分,同时记一下每一个 ...
- 【NOIP2006】能量项链
题面 Description 在 Mars 星球上,每个 Mars 人都随身佩带着一串能量项链.在项链上有 N 颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的 ...
- python多线程、多进程以及GIL
多线程 使用threading模块创建线程 传入一个函数 这种方式是最基本的,即调用threading中的Thread类的构造函数,然后指定参数target=func,再使用返回的Thread的实例调 ...
- python web开发-flask调试模式
使用run()方式可以启动flask应用,但是每次修改代码之后,需要重新启动,这样对于调试就很不太方便.Flask的调试模式可以让代码在每次修改之后自动载入. 有两种方法可以启用flask的调试模式 ...
- 关于Eclipse中Ctrl+Alt+Down和Ctrl+Alt+Up不起作用的解决方法
1.其它软件热键冲突,把其它软件的热键修改为其它按键,或者删掉热键 2.Intel显卡快捷键问题 1).你虽然禁用Intel快捷键,但是Intel快捷键仍然是Ctrl+alt+down,还是存在冲突, ...
- lsof命令各个参数
lsof `which httpd` 哪个进程在使用apache的可执行文件lsof /etc/passwd ------------ 哪个进程在占用/etc/passwdlsof /dev/hda ...
- 兄弟连教育分享:用CSS实现鼠标悬停提示的方法
兄弟连教育分享:用CSS实现鼠标悬停提示的方法 本文,兄弟连HTML5培训,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实 ...
- NGUI_Font
三.NGUI中的UI字体制作 1.概述: 系统中提供的字体 比较少,而UI字体又是使用最为频繁的,不能因为单一的字体而损失用户量,则这个时候我们就可以通过Font Maker进行字体的制作. 2.动态 ...
- WinSock 异步I/O模型
如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的. Windows操作系统提供了五种I/O模型,分别是选择(select)模型,异步选择(WSAAsyncSelect)模型, ...