5

我为 redactor（所见即所得的编辑器）编写了一个指令。经过一些黑客攻击后它可以工作，但我想找出正确的方法。对我来说主要的挑战是 ng-model 和 redactor jquery 插件之间的双向绑定。我从所见即所得的编辑器中收听 keyup 和命令事件并更新模型。我还从编辑器编辑器外部观察模型更改，以便我可以相应地更新编辑器编辑器。棘手的部分是：如何忽略反应器编辑器强加的 ng-model 更改（从绑定的前半部分开始）？

在以下代码中，它会记住编辑器编辑器更新到模型的最后一个值，如果模型的新值等于最后一个值，则忽略模型更改。我真的不确定这是否是实现这一目标的正确方法。在我看来，这是 Angular 中双向绑定的常见问题，必须有正确的方法。谢谢！

<textarea ui-redactor='{minHeight: 500}' ng-model='content'></textarea>

Directive.coffee（对不起咖啡脚本）

angular.module("ui.directives").directive "uiRedactor", ->

  require: "ngModel"
  link: (scope, elm, attrs, ngModel) ->
    redactor = null
    updatedVal = null

    updateModel = ->
      ngModel.$setViewValue updatedVal = elm.val()
      scope.$apply()

    options =
      execCommandCallback: updateModel
      keydownCallback: updateModel
      keyupCallback: updateModel

    optionsInAttr = if attrs.uiRedactor then scope.$eval(attrs.uiRedactor) else {}

    angular.extend options, optionsInAttr

    setTimeout ->
      redactor = elm.redactor options

    #watch external model change
    scope.$watch attrs.ngModel, (newVal) ->
      if redactor? and updatedVal isnt newVal
        redactor.setCode(ngModel.$viewValue or '')
        updatedVal = newVal
4

1 回答 1

0

Mark Rajcok 给出了解决方案（谢谢！）诀窍是使用 ngModel.$render() 而不是 $watch()。

采用

ngModel.$render = ->
  redactor?.setCode(ngModel.$viewValue or '')

代替

scope.$watch attrs.ngModel, (newVal) ->
  if redactor? and updatedVal isnt newVal
    redactor.setCode(ngModel.$viewValue or '')
    updatedVal = newVal
于 2013-03-11T18:23:29.473 回答