微信端应用 ionic实现texarea 自适应高度

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近公司项目,做微信端用到texarea 需要实现自适应高度的功能

当然自适应高度的方法很多网上找一大片,最直接的方式就是在使用到texarea的controller中添加js代码事件来实现,这中方式是比较麻烦用到一处就要添加一次

我们既然用到 ionic(angular)就要以ionic的思维去做东西,ionic提供了一个强大的功能就是 directive 自定义指定,这个功能爽炸天了,可以通过dom元素上的属性监听

dom从而实现对Dom的修改,以下是实现方式:

js,代码

//给有自适应高度的textarea添加事件
app.directive('textareaAuto', function ($timeout) {
   return {
   restrict: 'A',
   link: function(scope, element, attr) {
       console.log(element[0].nodeName)
             //判断是否是    TEXTAREA
       if("TEXTAREA"==element[0].nodeName&&attr.textareaAuto){
       //自适应高度
                 $(element).autoTextarea()
          }
      }
   };
});

html页面:
<textarea type="text" textarea-auto="true" rows="1" data-id="{{report.id}}" datatypes="{{report.type}}"> </textarea>