AngularJs 输入框自动变化高度和数据的绑定

AngularJs 输入框自动变化高度

当你想实现一个高度自增长的文本框的时候，也许你首先想到的是textarea，但是使用它太麻烦而且还会有很多问题，下面我们来介绍一种简单有效的方式。

div

div中有个属性contenteditable，当把它设为true的时候，这个div就会变为可编辑状态，所以我们可以利用这个属性来使div变为文本域，下面看代码

• html

    <div contenteditable="true" id="article-comment-content" class="article-comment-content" onblur="contentBlur()" ng-model="vm.articleComment.content"></div>
  

• css

    .article-comment-content{
        padding: 10px;
        line-height: 20px;
        font-size: 14px;
        background: white;
        -webkit-user-select: text;
    }
    .article-comment-content:empty:before {
        content: '请输入回帖内容';
        color: #999;
    }
    .article-comment-content:focus:before {
        content: none;
    }
  

placeholder.png

以上我们实现了文本输入框并自动增加文本框的高度，并设置了文本框的placeholder。但是细心的你可能要问了，应该怎么实现数据绑定呢？下面我们接着来看这个问题：

其实我们可以通过 var content = $('#article-comment-content').eq(0)[0].textContent 来获取输入框的值，但是这样是不能进行双向数据绑定的。对于这个问题我们可以使用自定义指令的方式

.directive('contenteditable', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            element.bind('input', function () {
                scope.$apply(function () {
                    ctrl.$setViewValue(element.html());
                });
            });
            ctrl.$render = function () {
                element.html(ctrl.$viewValue);
            };
        }
    };
});

或者

app.directive('contenteditable', function() {
　　return {
　　　　restrict: 'A', // 只用于属性
　　　　require: '?ngModel', 
　　link: function(scope, element, attrs, ngModel) {
　　　　if (!ngModel) {
　　　　　　return;
　　　　} 
　　　　ngModel.$render = function() {
　　　　　　element.html(ngModel.$viewValue || '');
　　　　};  　　　　
　　　　element.on('blur keyup change input', function() {
　　　　　　scope.$apply(readViewText);
　　　　});
　　　　function readViewText() {
　　　　　　var html = element.html();
　　　　　　if (attrs.stripBr && html === '<br>') {
　　　　　　　　html = '';
　　　　　　}
　　　　　　ngModel.$setViewValue(html);
　　　　}
　　}
};

2017-06-12 22.40.10.png

这样我们就可以实现数据的双向绑定了。