angularjs - 将相互依赖但不同的数据格式绑定(bind)到 Angular 中的输入

Question

作为练习，我使用 RGB 和十六进制创建颜色值的输入。

html:

<form ng-controller="myCtrl">
    R:<input ng-model="rChannel" type="number" min="0" max="255" required></input>
    G:<input ng-model="gChannel" type="number" min="0" max="255" required></input>
    B:<input ng-model="bChannel" type="number" min="0" max="255" required></input>

    hex: #<input ng-model="hexColor" type="text" required></input>
</form>

js:

function myCtrl($scope) {
    $scope.$watch('[rChannel, gChannel, bChannel]',
              function() {
                $scope.hexColor = rgbToHex($scope.rChannel, $scope.gChannel, $scope.bChannel)
              },
              true);

    $scope.$watch('hexColor',
              function() {
                var rgbArr = hexToRgbArray($scope.hexColor);
                $scope.rChannel =  rgbArr[0];
                $scope.gChannel =  rgbArr[1];
                $scope.bChannel =  rgbArr[2];
              });
}

http://jsfiddle.net/F545z/

它可以工作......但有一个很大的问题。一旦任何一个输入值无效(空字符串，或十六进制少于六个字符)，所有输入都会消失!这具有删除用户已经输入的值的效果。例如。当用户键入有效的 6 个字符的十六进制值，然后按删除键更正该十六进制的最后一个字符时，整个十六进制值就会消失，需要完全重新键入。如果您在控制台中观看，您可以看到正在发生的情况。我认为当十六进制无效时，RGB 输入消失是正确的行为，但这显然会妨碍用户删除他/她正在输入的值。

这显然是由于“双重绑定(bind)”而发生的——rgb 和 hex 值正在观察自己的模型，但也相互观察。这里存在一些严重的无限循环潜力，它之所以起作用可能只是因为 the angular docs say the loop only runs 10x以防止无限循环死锁。

我很确定我一开始就做错了。我应该尝试为十六进制输入编写单独的指令吗？如果是这样，我应该如何将它们全部连接起来？ $watch 对于这种用途合法吗？一个可用的 fiddle 是最有帮助的。

Answer 1

$watch 对于单向依赖效果很好。您希望有一些东西可以根据用户输入的内容来翻转依赖性。为此，请在输入上使用 ng-change:

http://jsfiddle.net/F545z/1/

<div ng-app>
    <form ng-controller="myCtrl" novalidate>
        R:<input ng-model="redChannel" ng-change="updateHex()" type="number"  min="0" max="255" required></input>
        G:<input ng-model="greenChannel" ng-change="updateHex()" type="number"  min="0" max="255" required></input>
        B:<input ng-model="blueChannel" ng-change="updateHex()" type="number"  min="0" max="255" required></input>
        <br><br>
        hex: #<input ng-model="hexColor" ng-change="updateChannels()" type="text" required></input>
    </form>
</div>