Angular JS - 在文本区域中显示和编辑模型并在模型更改时更新答案

【问题标题】：Angular JS - display and edit model in textarea AND update when model changesAngular JS - 在文本区域中显示和编辑模型并在模型更改时更新
【发布时间】：2015-02-19 21:48:05
【问题描述】：

我刚从这个帖子过来：

Angular JS display and edit model in textarea

这对我想要实现的目标非常有帮助，但是我需要更进一步，并在模型值更改时更新 textarea。我正在与上述帖子中@JustMaier 的最后一个example 合作。我想我需要添加一个$watch，但不确定如何/在哪里。感谢您的帮助，谢谢！

【问题讨论】：

标签： javascript angularjs textarea angular-ngmodel

【解决方案1】：

您可以在directive 中watch 您的model 值并在更改时触发formatters：

scope.$watch(function() {
    return ngModel.$modelValue;
}, function(modelValue) {
    // trigger the formatters
    ngModel.$modelValue = '';
}, true);

DEMO

【讨论】：

【解决方案2】：

是的，你是对的。它实际记录的 ngModel 不会观察深度变化，因此当模型发生深度变化时不会查看 zpdate：

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

因此，您需要将 ngModel 值添加到指令范围，以便在其上使用 $watch：

scope:{'ngModel':'='}

然后将更新视图值的手表添加到指令链接函数中：

scope.$watch ('ngModel', function (newval) { 
  ngModel.$viewValue = toJson(newval);
  ngModel.$render();
}, true);

查看演示： http://codepen.io/anon/pen/xbWamy

【讨论】：