在AngularJS中,直观的观察$scope变量,并使用它来更新另一个.但是如果两个范围变量需要彼此观看,那么最佳实践是什么？
我将一个双向转换器作为一个例子,将华氏温度转换为摄氏度,反之亦然.如果您将“1”输入华氏度,则可以正常工作,但尝试“1.1”,Angular会在覆盖华氏度之前稍稍反弹,您刚刚输入的值将略有不同(1.1000000000000014)：
function TemperatureConverterCtrl($scope) {
$scope.$watch('fahrenheit',function(value) {
$scope.celsius = (value - 32) * 5.0/9.0;
});
$scope.$watch('celsius',function(value) {
$scope.fahrenheit = value * 9.0 / 5.0 + 32;
});
}
这是一个坑：http://plnkr.co/edit/1fULXjx7MyAHjvjHfV1j?p=preview
什么是不同的可能方法来阻止角度“弹跳”,迫使它使用您键入的值,例如.通过使用格式化器或解析器(或任何其他技巧)？
我认为最简单,最快,最正确的解决方案是使用一个标志来跟踪正在编辑的字段,并且仅允许该字段的更新.
所有您需要的是使用ng-change指令在要编辑的字段上设置标志.
代码更改必要：
修改控制器看起来像这样：
function TemperatureConverterCtrl($scope) {
// Keep track of who was last edited
$scope.edited = null;
$scope.markEdited = function(which) {
$scope.edited = which;
};
// Only edit if the correct field is being modified
$scope.$watch('fahrenheit',function(value) {
if($scope.edited == 'F') {
$scope.celsius = (value - 32) * 5.0/9.0;
}
});
$scope.$watch('celsius',function(value) {
if($scope.edited == 'C') {
$scope.fahrenheit = value * 9.0 / 5.0 + 32;
}
});
}
然后将这个简单的指令添加到输入字段(根据需要使用F或C)：
<input ... ng-change="markEdited('F')/>
现在只有输入的字段可以改变另一个.
如果您需要在输入外部修改这些字段的功能,则可以添加一个示例或控件函数,如下所示：
$scope.setFahrenheit = function(val) {
$scope.edited = 'F';
$scope.fahrenheit = val;
}
然后在下一个$digest循环中更新摄氏度字段.
