angularjs使用div模拟textarea文本框

前端之家收集整理的这篇文章主要介绍了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相关文章