javascript - AngularJs - 一个 $watch 函数中的多个应用/摘要周期

Question

我想知道如何在 $watch 表达式中触发第二个摘要周期。看起来在 $watch 表达式中只有一个摘要循环是可能的。我尝试调用 $apply 但它崩溃并显示消息“摘要已在进行中”。

function TestCtrl($scope) {
    var purchase_orders = [
        {id : 1, name : 'Purchase Order One', multiple_day_rates : true },
        {id : 2, name : 'Purchase Order Two', multiple_day_rates : false },
        {id : 3, name : 'Purchase Order Three', multiple_day_rates : true } ];

$scope.purchase_orders = purchase_orders;

$scope.$watch(
    "poId",
    function( poId ) {
        console.log("watch triggered for po id");
        $scope.multiple_day_rates = null; //seems to have no effect..
        //$scope.$apply(function () {
        //          $scope.multiple_day_rates = null;
        //        }); --> throws digest already in progress
        var purchase_order_obj = jQuery.grep($scope.purchase_orders, function(e){ return e.id == $scope.poId; });
        if(typeof purchase_order_obj[0] != 'undefined'){
            if(purchase_order_obj[0].multiple_day_rates == true){
                console.log("before setting multiple day rates to true");
                $scope.multiple_day_rates = true;
            }
            else{
                console.log("before setting multiple day rates to false");
                $scope.multiple_day_rates = false;
                $scope.day_rate_check=true;
            }
        }
      }
    ); 

$scope.$watch(
    "multiple_day_rates",
    function( multiple_day_rates ) {
        console.log("watch triggered for multiple day rates");
        }
    ); 
}

我的目标是当设置 $scope.multiple_day_rates 时，我想运行一些代码。我还想检测它何时从 true 设置为 true。由于 AngularJS 正在进行某种脏检查(仅在值发生更改时触发监视)，因此我必须先将 $scope.multiple_day_rates 设置为 null，以便检测到更改。但不知怎的，在 $watch 表达式中似乎只有一个摘要周期是可能的。这是JSFiddle 。您可以看到，当选择从“采购订单一”更改为“采购订单二”时，没有任何反应，因为 multiple_day_rates 两次都是 true。

Answer 1

这就是你想要实现的目标吗？

function TestCtrl($scope, $timeout) {
    var purchase_orders = [{
        id: 1,
        name: 'Purchase Order One',
        multiple_day_rates: true
    }, {
        id: 2,
        name: 'Purchase Order Two',
        multiple_day_rates: false
    }, {
        id: 3,
        name: 'Purchase Order Three',
        multiple_day_rates: true
    }];
    $scope.purchase_orders = purchase_orders;

    $scope.$watch(
        "poId",
        function (poId) {
            console.log("watch triggered for po id");
            $scope.multiple_day_rates = null; //seems to have no effect..
            //$scope.$apply(function () {
            //          $scope.multiple_day_rates = null;
            //        }); --> throws digest already in progress
            $timeout(function () {
                var purchase_order_obj = jQuery.grep($scope.purchase_orders, function (e) {
                    return e.id == $scope.poId;
                });
                if (typeof purchase_order_obj[0] != 'undefined') {
                    if (purchase_order_obj[0].multiple_day_rates == true) {
                        console.log("before setting multiple day rates to true");
                        $scope.multiple_day_rates = true;
                    } else {
                        console.log("before setting multiple day rates to false");
                        $scope.multiple_day_rates = false;
                        $scope.day_rate_check = true;
                    }
                }
            });
        }
    );

    $scope.$watch(
        "multiple_day_rates",
        function (multiple_day_rates) {
            console.log("watch triggered for multiple day rates");
        }
    );
}

http://jsfiddle.net/qhnr5/