微信端应用 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>

其中textarea-auto为自定义指令 如果项目中任何地方用需要自适应高度只要添加 textarea-auto="true"  z指令即可

$(element).autoTextarea() //至二个是自定义的一个插件可以在网上搜以下很多的,如果有需要可以留言