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.@R_262_9363@ce(/<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里面先过滤一遍数据（@L_607_13@的时候也需要过滤一次）

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

大佬总结

以上是大佬教程为你收集整理的AngularJS，实现contenteditable的双向绑定全部内容，希望文章能够帮你解决AngularJS，实现contenteditable的双向绑定所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。