$watch 在这里有用吗？

Question

我正在使用 angularjs 指令模板从传入的模型中呈现单个计算值（总和）。

如果我使用模板正常呈现值，则没有问题。 呈现的值只是传递给指令/模板的一堆行对象值的总和，如下所示：

ngApp.directive('subtotal', function() {
    return {
        restrict: 'E',
        scope: { 
            icRows: '='
        },
        template: '<div><strong>Sub Total:</strong> {{subTotal()}}</div>',
        replace: true,
        link: function($scope, $element, $attr) {
            $scope.subTotal = function() {
                var t = 0;
                for(var i=0; i<$scope.icRows.length; i++ ) {
                    t += $scope.icRows[i].price;
                }
                return t;
            }
        }
    };
});


<div ng-app="app">

    <div ng-controller="MyCtrl">
        <div ng-repeat="row in rows">
            <input ng-model="row.name" /> | <input ng-model="row.price" />
        </div>
        <hr/>
        <subtotal ic-rows="rows"></subtotal>
    </div>
</div>

这很好用。 在这里演示：http://jsfiddle.net/jralston/p8FLV/

我的问题是“subTotal”变量实际上是 AJAX 调用的结果。当“rows”变量发生更改时，需要调用此 ajax 调用。为此，我将指令中的模板调整为：

<div><strong>Sub Total:</strong> {{subTotalInvoker()}} {{subTotal}}</div>

现在在指令中，函数 $scope.subTotalInvoker() 调用 ajax 调用。来自该回调的回调设置了“subTotal”的值

再一次，这工作得很好。

这里的演示： http://jsfiddle.net/jralston/wpYjL/

但是，这似乎是一种完全错误的做法。

我尝试将 $watch 添加到 $scope.icRows 但它不起作用。也许我做错了什么。

非常欢迎任何关于如何最好地做到这一点的指示和/或更正。

谢谢

约翰

Answer 1

解决方案 1 - 使用 $watchCollection

您可以使用 $watchCollection。当整个数组在作用域上被替换时（即 $scope.icRows = []），当从 icRows 添加或删除项目时，或者替换项目之一时，$watchCollection 将调用其监视处理程序。

ngApp.directive('subtotal', function() {
    return {
        restrict: 'E',
        scope: { 
            icRows: '='
        },
        template: '<div><strong>Sub Total:</strong> {{subTotal}}</div>',
        replace: true,
        link: function($scope, $element, $attr) {
            $scope.subTotal = 0;
            $scope.$watchCollection('icRows', function(newVal) {
                var t = 0;
                for(var i=0; i<newVal.length; i++ ) {
                    t += newVal[i].price;
                }
                $scope.subTotal = t;
            }

        }
    };
});

解决方案 2 - 使用 Deep $watch

但我怀疑这不合适，因为 '.price' 可能会更改，并且 $watchCollection 不会检查项目的属性是否更改。

如果您需要深度监视（同时搜索属性和子属性的更改），则使用 $watch 并将 true 作为第二个参数传递：

$scope.$watch('icRows', function(newVal) {
     ...
}, true);

$watch(true) 有一些你需要注意的细微差别。我不确定这在最近对 Angular 的更新中是否发生了变化，但是当我使用它时，我发现 $watch(true) 不会检查数组中的添加/删除，或者即使数组被完全替换.不过，它确实做了深入的观察。

过滤器 - 一种替代方法

过滤器的工作方式类似于 $watchCollection。缺点是当商品的 .price 属性发生变化时，过滤器不会更新。

ngApp.filter('subtotal', function() {
    return function(input) { 
         var t = 0; 
         for (var i= 0; i < input.length; ++i) {
             t += parseFloat(input[i].price);
         }
         return t;
    }
});

然后在您的 HTML 中，您可以将过滤器应用于您在范围内的数组：

<div ng-app="app">

    <div ng-controller="MyCtrl">
        <div ng-repeat="row in rows">
            <input ng-model="row.name" /> | <input ng-model="row.price" />
        </div>
        <hr/>
        {{ rows | subtotal | currency }}
    </div>
</div>

如果这符合您的要求，则不需要自定义指令，您可以使用currency filter 进一步将结果格式化为货币。

Answer 2

您不需要指令或过滤器。只需在控制器中添加 subTotal() 函数即可：

$scope.subTotal = function(rows){
    var t = 0;
    for(var i=0; i<rows.length; i++ ) {
        t += rows[i].price;
    }
    return t;
}

并在您的 HTML 中绑定该函数：

<div><strong>Sub Total:</strong> {{subTotal(rows)}}</div>

Demo