AngularJS,实现contenteditable的双向绑定

前端之家收集整理的这篇文章主要介绍了AngularJS,实现contenteditable的双向绑定前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

在项目中遇到需要使用contenteditable来替代textarea,实现输入内容自动高度,但是div或者p这样的标签并不是一个输入控件,不能直接被ngModel绑定,这个时候就需要把contenteditable做成一个directive来实现双向绑定:

代码

app.directive('contenteditable',function () {
    return {
        require: 'ngModel',link: function (scope,element,attrs,ctrl) {
            /*输入回车的时候会转义成<br>被提交,所以去掉回车的输入*/
            function deleteBr(sHtml) {
                return sHtml.replace(/<br>/g,"");
            }
            // view -> model
            element.bind('input',function () {
                scope.$apply(function () {
                    element.html(deleteBr(element.html()));
                    ctrl.$setViewValue(element.html());
                });
            });

            // model -> view
            ctrl.$render = function () {
                element.html(ctrl.$viewValue);
            };

            // load init value from DOM
            ctrl.$render();
        }
    };
});

注意

  • 在div中输入回车是会被转义成
    ,而在实际使用中可能需要禁止回车,所以在directive中需要把回车产生的
    过滤掉;

  • 在html中需要设置contenteditable="plaintext-only"控制输入的内容为纯文本,因为复制过来的一些内容可能会被带上一些文字样式;

  • 在model中输入<>会被转义,解决办法是在controller里面先过滤一遍数据(输出的时候也需要过滤一次)

function html2Escape(sHtml) {
        return sHtml.replace(/[<>&"]/g,function (c) {
            return {'<': '&lt;','>': '&gt;','&': '&amp;','"': '&quot;'}[c];
        });
    }
    $scope.text= html2Escape($scope.text)

猜你在找的Angularjs相关文章