javascript - 触发ng-model。$ formatters以编程方式运行

我想要一个自定义控件，该控件使用 ngModel.$formatters 能够在服务器依赖项加载后立即格式化数据。就我而言，它需要加载查找表才能从一种ID转换为另一种ID。 $modelValue存储一件事$viewValue显示另一件事。很简单的东西。

诀窍是，如果未加载查询表，则无法将格式格式化为$ viewValue。

加载数据后，我需要执行以下操作:

ngModel.$formatters.push(myFormatter)

告诉ngModel从$modelValue -> $formatters -> $viewValue开始管道

$render()不起作用，这只是将值从$viewValue移到UI控件中。$rollbackViewValue()看起来很有前途，但这仅是一个不稳定的版本(1.3.0-beta.18)。

代码样例:

mappingTable.load().then(function(data){
  mappingData = data;
  ngModel.$formatters.push(myFormatter); // needs mappingData in order to function
  // TODO: Tell ngModel to run the existing $modelValue through $formatters to calculate a  new $viewValue and $render it
  //ngModel.$render() // doesn't work, only puts the $viewValue in the DOM element.
});

最佳答案

查看ngModelController的代码，看来您偶然发现的内容(将$modelValue设置为当前实际模型值以外的任何值)是执行此操作的公认方法。就像您说的那样，不会使用您设置的值:它只会触发更新。首先检查其当前值以确保其实际更改(或使用不太可能的值)。

if (ngModel.$modelValue == 'bar')
    ngModel.$modelValue = 'foo';
else
    ngModel.$modelValue = 'bar';

这是一个related question。

另外，还有一种active pull request，看起来像是执行此操作的“官方”方式。

它起作用的原因是ngModelController设置了一个$watch，该$modelValue运行每个摘要周期，该周期将$formatters与ng-model绑定(bind)的值进行比较。如果它们不匹配，它将触发ojit_code管道。