angularJS contenteditable 指令双向绑定

Posted 2020-07-28

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