避免导致$ digest已经在进行中的$ watch()循环错误

时间:2014-06-26 15:36:23

标签: javascript jquery angularjs jquery-knob

这个问题与之前的问题有关,因为它有一个赞成的答案:Change jQuery Knob Min/Max value

以下代码是jQuery knob插件的包装器。我知道现有的角度包装器,但是使用它来进一步理解角度框架。无论如何,所以我的问题是当$ watch()的检测变为旋钮的最小值和最大值时,触发的变化事件会在角度内导致某种类型的碰撞,从而导致$ digest已经在进行中。注释掉更改函数中的两行并不会停止错误,而是注释掉$(elem).trigger('change');线条呢。这打破了我最初的假设,即范围。$ apply()是原因。如果有人知道这里发生了什么,任何信息将不胜感激。谢谢。

App.directive('knobWidget', function () {
    return {
        scope: {
            minbinding: "=minbinding",
            minbindingprop: "@minbindingprop",
            maxbinding: "=maxbinding",
            maxbindingprop: "@maxbindingprop",
            delta: "@delta"
        },
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {
            ngModel.$render = function () {
                $(elem).val(ngModel.$viewValue)
                $(elem).trigger("change");
            };
            $(elem).knob({
                min: 0,
                max: 1,
                value: ngModel.$viewValue,
                change: function (changeVal) {
                    ngModel.$setViewValue(changeVal);
                    scope.$apply();
                }
            });
            scope.$watch(function () { return scope.maxbinding[scope.maxbindingprop] }, function (newVal) {         
                $(elem).trigger('configure', { 'max': scope.maxbinding[scope.maxbindingprop] + parseInt(scope.delta) });
                $(elem).trigger('change');             
            });
            scope.$watch(function () { return scope.minbinding[scope.minbindingprop] }, function (newVal) {         
                $(elem).trigger('configure', { 'min': scope.minbinding[scope.minbindingprop] + parseInt(scope.delta) });
                $(elem).trigger('change');             
            });
        }
    };
});

1 个答案:

答案 0 :(得分:0)

请勿使用$ timeout使用范围。$$阶段

if(!scope.$$phase){
   scope.$apply();
}

这将在不使代码异步的情况下阻止循环。如果您目前处于摘要周期,则无需致电申请