javascript - Angular Directive - 如何使用 ng-model 设置双向绑定(bind)

我为 redactor(一个所见即所得的编辑器)编写了一个指令。它在一些黑客攻击后有效，但我想找出正确的方法。我面临的主要挑战是 ng-model 和 redactor jquery 插件之间的双向绑定(bind)。我从所见即所得编辑器收听 keyup 和命令事件并更新模型。我还从 redactor 编辑器外部观察模型更改，以便我可以相应地更新 redactor 编辑器。棘手的部分是:如何忽略 react 堆编辑器(从绑定(bind)的前半部分)强加的 ng-model 更改？

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

<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

最佳答案

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