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

AngularJs - Multiple apply / digest cycles in one $watch function

本文关键字:应用 周期 watch 一个 AngularJs- 函数      更新时间:2023-09-26

我想知道如何在$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

这就是您想要实现的目标吗?

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/