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

Question

我想要一个使用 ngModel.$formatters 的自定义控件能够在加载服务器依赖项后立即格式化数据。在我的例子中，它需要加载一个查找表以从一种 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.
});

Answer 1

查看 ngModelController 的代码，您偶然发现的(将 $modelValue 设置为当前实际模型值以外的任何值)似乎是可以接受的方法。正如您所说，您设置的值未被使用:它只是触发更新。首先检查其当前值以确保它确实发生了变化(或使用一个不太可能的值)。

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

这是一个related question .

此外，还有一个 active pull request这看起来像是即将推出的“官方”方式。

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