angularJS contenteditable 指令双向绑定

最新推荐文章于 2024-08-25 08:45:47 发布

转载最新推荐文章于 2024-08-25 08:45:47 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cench/p/5607972.html

本文介绍了一个自定义AngularJS指令，该指令允许用户通过双击一个div元素使其变为可编辑状态，并在失去焦点后将编辑的内容更新到模型中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目遇到需求有点奇葩：双击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);
                  };
                }
              };
            })