Question

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

为什么元素不会在focusIn上显示任何内容，也不会在focusOut之后更新，这可能是因为ngModel。$ render（）。

如果只在执行focusIn后它才有效，我怎样才能注册最后一个事件ngModel。$ render（）？

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

＆＃13;

// 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;
                });
            }
        };

＆＃13;

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

请查看我的plunker版本。

Answer 1

我已经通过将ngModel。$ render（）函数放在一个单独的指令中来解决它。我的错误

使用ngModel进行角度自定义wysi指令

1 个答案: