这是将$ watch用于多个范围的最佳方式

Question

我正在开发RGB滑块并在之后将其转换为HEX。但这是我第一次使用$ watch，我不确定这是否是使用它的正确方法。它有效，但我有点怀疑。

$scope.colorRed = 0;
$scope.colorGreen = 0;
$scope.colorBlue = 0;

$scope.$watch('colorRed', function() {
  $scope.colorHex = rgbToHex($scope.colorRed, $scope.colorGreen, $scope.colorBlue);
});

$scope.$watch('colorGreen', function() {
  $scope.colorHex = rgbToHex($scope.colorRed, $scope.colorGreen, $scope.colorBlue);
});
$scope.$watch('colorBlue', function() {
  $scope.colorHex = rgbToHex($scope.colorRed, $scope.colorGreen, $scope.colorBlue);
});

Plunker

Answer 1

如果您要创建手表，为什么不使用对象存储颜色，并添加一个手表来跟踪对象的属性更改。

$scope.color = {
  Red: 0,
  Blue:0,
  Green:0
}

只需使用一只手表。

$scope.$watch('color', function(color) { 
   $scope.colorHex = rgbToHex(color.Red, color.Green, color.Blue); //color will be same as $scope.color
}, true);

或：

$scope.$watch(function(){
    return $scope.color;
 }, function(color) {
    $scope.colorHex = rgbToHex(color.Red, color.Green, color.Blue);
}, true);