带有 ngModel 的角度自定义 wysi 指令

Question

我在我的角度项目中使用所见即所得的编辑器，并扩展了以下指令。

为什么元素在focusIn处不显示任何内容，在focusOut之后也不更新，可能是ngModel.$render()的原因。

如果最后一个事件 ngModel.$render() 仅在执行 focusIn 后有效，我如何注册它？

是否必须在 focusIn/Out 上重新注册事件，因为我替换了元素？

// focusin/out event for replacing div
function focusIn(e) {

  //wysi redactor template
  var tmpl = '<div ng-model=model validation="{{::scope.column.validation}}" placeholder="{{::scope.column.placeholder}}" class="wysi f12 form-control" contenteditable redactor';

  if (element.hasClass('one-row'))
    tmpl += ' ="{deniedTags: [\'br\'],enterKey: false,pastePlainText: true,linebreaks: true}" ng-class="one-row"></div>';
  else
    tmpl += '></div>';

  var tmp = $compile(tmpl)(scope);
  //var tmp = angular.element(tmpl);

  // Resume the compilation phase after setting ngModel
  element.replaceWith(tmp);

  // put in timeout to avoid $digest collision.  call render() to
  // set the initial value.
  $timeout(function() {

    editor = element.redactor(options);
    element.on('focusout', focusOut);
    ngModel.$render();
    //element.on('remove', function () {
    //    //console.log('redactor remove ' + scope.column);
    //    element.off('remove');
    //    element.redactor('core.destroy');
    //    //todo aow: maybe save value?
    //});
  }, 150);

}

//destroy redactor when losing focus
        function focusOut(e) {

            //for html render in read-only div
            scope.readonlyContent = scope.column.content;

            //destroy redactor
            element.redactor('core.destroy');

            //replace redactor with read-only div
            element.replaceWith(this.template);
            //$compile(element)(scope);

            element.on('click', focusIn);

            console.log('after settemplate');
            
        }

        ngModel.$render = function() {
            if(angular.isDefined(editor)) {
               $timeout(function() {
                    console.log('redactor render ' + scope.column);
                    //var ed = element.find('.wysi');
                    element.redactor('code.set', ngModel.$viewValue || '');
                    element.redactor('placeholder.toggle');
                    scope.redactorLoaded = true;
                });
            }
        };

我这样做很复杂，因为 ng-model 不支持正确渲染 html，它必须在 ng-bind-html 中才能正确渲染，所以我必须使用 2 个不同的 div

请查看我的plunker 版本。

Answer 1

我已经解决了这个问题，方法是将 ngModel.$render() 函数放在一个单独的指令中，就像原来一样。我的错