angularjs使用div模拟textarea文本框的方法
更新时间：2018年10月02日 14:14:55 作者：飞向Hadoop
今天小编就为大家分享一篇angularjs使用div模拟textarea文本框的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
html：
<div class="simulate-textarea" ng-model="view.text" contenteditable="true" placeholder="请输入内容"></div>
Angularjs指令：
/**
* div模拟textarea输入框双向数据绑定指令
*/
.directive('contenteditable', [function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
//view -> model
element.bind('input', function() {
scope.$apply(function() {
ctrl.$setViewValue(element.html());
});
});
//model -> view
ctrl.$render = function() {
element.html(ctrl.$viewValue);
};
}
};
}
css：
.simulate-textarea {
margin-left: 84px;
display: inline-block;
width: calc(100% - 84px);
/*border: 1px solid #dddddd;*/
min-height:20px;
_height: 20px;
max-height: 120px;
/*border-radius: 4px;*/
/*padding: 4px 6px;*/
outline: 0;
word-break:break-all;
word-wrap: break-word;
white-space: pre-wrap;
overflow-x: hidden;
overflow-y: auto;
line-height: 20px;
font-size: 12px;
}
以上这篇angularjs使用div模拟textarea文本框的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了Angularjs中使用指令绑定点击事件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
这篇文章主要介绍了AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2016-01-01
这篇文章主要介绍了模板视图和AngularJS之间冲突的解决方法,结合实例形式分析了AngularJS模板视图冲突的原因并给出了2种解决方法供大家参考使用,需要的朋友可以参考下2016-11-11
微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决
本文主要介绍微信+angularJS的SPA应用中用router进行页面跳转，jssdk校验失败问题解决，这里提供了详细的操作方式，有需要的小伙伴可以参考下2016-09-09
这篇文章主要给大家介绍了关于Angular 4中如何显示内容的CSS样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要介绍了AngularJS中的过滤器filter用法,包括Angular中一些常用的自带的过滤器的列举以及自定义filter的方法,需要的朋友可以参考下2016-04-04
这篇文章主要介绍了Angular4中的checkbox 全选按钮启用禁用的相关资料,需要的朋友可以参考下2023-03-03
angularjs中控制视图的控制器的两种注入依赖项及服务的写法小结
在AngularJS中,控制器的依赖注入有两种方法：显式依赖注入和隐匿依赖注入,显式依赖注入通过使用字符串数组形式来注入依赖项,本文给大家介绍angularjs中控制视图的控制器的两种注入依赖项及服务的写法,感兴趣的朋友一起看看吧2024-09-09
Material(包括Material Icon)在Angular2中的使用详解
这篇文章主要介绍了Material(包括Material Icon)在Angular2中的使用,需要的朋友可以参考下2018-02-02
这篇文章主要为大家详细介绍了Angular的$http与$location，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论