项目遇到需求有点奇葩:双击div使其可编辑,失去焦点后进行数据绑定
通过自定义指令完成
好了上代码:
.directive(‘contentEditable‘, function() { return { require: ‘ngModel‘, link: function(scope, element, attrs, ctrl) { debugger // view -> model element.bind(‘dblclick‘, function () { if (!attrs.contenteditable) { attrs.$set(‘contenteditable‘, true); element[0].focus(); } }); element.bind(‘blur‘, function() { attrs.$set(‘contenteditable‘, false); scope.$apply(function() { ctrl.$setViewValue(element.html()); }); }); // model -> view ctrl.$render = function() { element.html(ctrl.$viewValue); }; } }; })
参考站点:https://segmentfault.com/q/1010000003727922?_ea=348533
时间: 2024-12-14 10:36:06