AngularJS,实现contenteditable的双向绑定
发布时间:2020-12-17 10:13:25 所属栏目:安全 来源:网络整理
导读:前言 在项目中遇到需要使用contenteditable来替代textarea,实现输入内容的自动高度,但是div或者p这样的标签并不是一个输入控件,不能直接被ngModel绑定,这个时候就需要把contenteditable做成一个directive来实现双向绑定: 代码 app.directive('contented
前言在项目中遇到需要使用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(); } }; }); 注意
function html2Escape(sHtml) { return sHtml.replace(/[<>&"]/g,function (c) { return {'<': '<','>': '>','&': '&','"': '"'}[c]; }); } $scope.text= html2Escape($scope.text) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |