具有大量控件的窗体，这些控件之间存在交互。比$scope.$watch更干净的方法？

Question

我正在构建一个angular应用程序，表单有大约15个控件。这是一个金融应用程序。请不要建议分解页面等。

其中一些控件相互依赖。大约有5个输入控件(让我们称它们为源控件)，它们中的任何一个都可以改变，并影响其他5个控件中的一个或多个(让我们称它们为dest控件)。我构造它的方式是，我对5个源变量中的每个变量都有一个$scope.$watch，并且在每个watch函数中，我都有一些代码来决定要更新5个dest变量中的哪一个，并对它们进行更新。其中一款手表的示例如下所示。

$scope.$watch('money.price',function(newVal,oldVal) {

    if(newVal != oldVal) {

        if($scope.money.quantity != undefined) {
            updatePrincipal($scope)
            updateFees($scope);
            $scope.money.net = $scope.money.principal + $scope.money.fee 
        }
    }
});

我真的不觉得这很优雅。有没有更好/更干净的方法来做这件事？(表单在未来只会变得更复杂，即多2-3个依赖字段，但不会更多)。

Answer 1

假设您的输入控件附加了一个ng-model，我建议您向每个输入表单添加ng-change，您可以使用相同的函数一次更新所有范围绑定

Answer 2

利用使用ng-bind指令创建的$watch。

<div ng-bind="getMoneyNet()"></div>

     OR SIMPLY

{{ getMoneyNet() }}

定义函数，而不是在控制器中创建$watch。

 $scope.getMoneyNet = function() {
     if ($scope.money.quantity != undefined) {
        updatePrincipal($scope)
        updateFees($scope);
        $scope.money.net = $scope.money.principal + $scope.money.fee 
     };
     return $scope.money.net;
 };

然后，在每个摘要周期中，由ng-bind指令创建的$watch计算money.net的值，并根据需要更新DOM。