AngularJS: Запобігати дайджесту помилок $, який вже працює під час виклику $ range. $ Apply ()

Я знаходжу, що мені потрібно вручну оновлювати свою сторінку в моєму обсязі після створення програми в кутовому режимі.

Єдиний спосіб, з якого я це знаю, - це викликати $apply()сферу моїх контролерів та директив. Проблема в цьому полягає в тому, що він продовжує викидати помилку на консоль, яка говорить:

Помилка: дайджест $ вже триває

Хтось знає, як уникнути цієї помилки чи досягти тієї ж речі, але по-іншому?

Не використовуйте цю схему - це призведе до більшої кількості помилок, ніж вирішено. Незважаючи на те, що ви думаєте, що це щось виправляло, це не сталося.

Ви можете перевірити, чи a $digestвже працює, перевіривши $scope.$$phase.

if(!$scope.$$phase) {
  //$digest or $apply
}

$scope.$$phaseповернеться, "$digest"або "$apply"якщо a $digestабо $applyтриває. Я вважаю, що різниця між цими станами полягає в тому, що вони $digestбудуть обробляти годинник поточного обсягу та його дітей, а $applyтакож обробляти спостерігачів усіх областей.

До пункту @ dnc253, якщо ви опиняєтесь $digestабо дзвонили $applyчасто, ви можете робити це неправильно. Як правило, мені здається, що мені потрібно переварити, коли мені потрібно оновити стан області в результаті події DOM, що вистрілюється за межі досяжності Angular. Наприклад, коли модальний завантажувальний механізм щебетання стає прихованим. Іноді подія DOM спрацьовує, коли a $digestпрацює, іноді ні. Ось чому я використовую цю перевірку.

Я хотів би знати кращий спосіб, якщо хтось його знає.

З коментарів: автор @anddoutoi

angular.js Anti Patterns

2. Не робіть if (!$scope.$$phase) $scope.$apply()це, це означає, що ваш $scope.$apply()недостатньо високий у стеку викликів.

З недавньої дискусії з кутовими хлопцями на цю саму тему: З причин, що підтверджують майбутнє, не слід використовувати$$phase

При натисканні на "правильний" спосіб це зробити, відповідь наразі є

$timeout(function() {
  // anything you want can go here and will safely be run on the next digest.
})

Нещодавно я натрапив на це, коли писав кутові сервіси для обговорення API facebook, google та twitter, які в тій чи іншій мірі передають зворотній зв'язок.

Ось приклад з послуги. (Для стислості решта сервісу - що встановлює змінні, вводить $ timeout тощо) - була залишена.)

window.gapi.client.load('oauth2', 'v2', function() {
    var request = window.gapi.client.oauth2.userinfo.get();
    request.execute(function(response) {
        // This happens outside of angular land, so wrap it in a timeout 
        // with an implied apply and blammo, we're in action.
        $timeout(function() {
            if(typeof(response['error']) !== 'undefined'){
                // If the google api sent us an error, reject the promise.
                deferred.reject(response);
            }else{
                // Resolve the promise with the whole response if ok.
                deferred.resolve(response);
            }
        });
    });
});

Зауважте, що аргумент затримки для $ timeout є необов'язковим і буде за замовчуванням 0, якщо його не встановлено ( $ timeout закликає $ browser.defer, який за замовчуванням дорівнює 0, якщо затримка не встановлена )

Трохи не інтуїтивно зрозумілий, але це відповідь хлопців, які пишуть Angular, тому для мене це досить добре!

Цикл дайвінгу - це синхронний дзвінок. Він не буде контролювати цикл подій браузера, поки це не буде зроблено. Є кілька способів вирішити це. Найпростіший спосіб впоратися з цим - використовувати вбудований у $ timeout час, а другий спосіб - якщо ви використовуєте підкреслення або lodash (і вам слід), зателефонуйте наступним чином:

$timeout(function(){
    //any code in here will automatically have an apply run afterwards
});

або якщо у вас є lodash:

_.defer(function(){$scope.$apply();});

Ми спробували декілька обхідних шляхів, і ми ненавиділи вводити $ rootScope у всі наші контролери, директиви і навіть деякі фабрики. Отже, $ timeout та _.defer були нашими улюбленими досі. Ці методи успішно кажуть угловому очікувати до наступного циклу анімації, що гарантуватиме, що поточна область застосування.

Багато відповідей тут містять корисні поради, але також можуть призвести до плутанини. Просто використання $timeout- не найкраще, ані правильне рішення. Також не забудьте прочитати це, якщо вас турбують виступи чи масштабованість.

Речі, які ви повинні знати

• $$phase є приватною основою, і для цього є вагомі причини.

• $timeout(callback)буде чекати, поки завершиться поточний цикл дайвінгу (якщо такий є), потім виконати зворотний виклик, а потім виконати в кінці повний $apply.

• $timeout(callback, delay, false)зробить те ж саме (з необов'язковою затримкою перед виконанням зворотного дзвінка), але не запустить $apply(третій аргумент), який зберігає продуктивність, якщо ви не змінили модель Angular ($ range).

• $scope.$apply(callback)посилається, серед іншого $rootScope.$digest, що означає, що він перенаправить кореневу область програми та всіх її дітей, навіть якщо ви знаходитесь в ізольованому обсязі.

• $scope.$digest()просто синхронізує свою модель з поданням, але не перетравить область батьків, що може заощадити багато виконання при роботі над ізольованою частиною вашого HTML з ізольованою сферою (здебільшого з директиви). $ digest не приймає зворотний дзвінок: ви виконайте код, а потім дайджест.

• $scope.$evalAsync(callback)був представлений з angularjs 1.2, і, ймовірно, вирішить більшість ваших проблем. Будь ласка, зверніться до останнього пункту, щоб дізнатися більше про нього.

• якщо ви отримаєте $digest already in progress error, то ваша архітектура помиляється: або вам не потрібно перенаправляти область, або ви не повинні відповідати за це (див. нижче).

Як структурувати код

Коли ви отримуєте цю помилку, ви намагаєтеся переварити масштаби, поки вона вже триває: оскільки ви не знаєте, яким є стан вашої сфери на той момент, ви не відповідаєте за її травлення.

function editModel() {
  $scope.someVar = someVal;
  /* Do not apply your scope here since we don't know if that
     function is called synchronously from Angular or from an
     asynchronous code */
}

// Processed by Angular, for instance called by a ng-click directive
$scope.applyModelSynchronously = function() {
  // No need to digest
  editModel();
}

// Any kind of asynchronous code, for instance a server request
callServer(function() {
  /* That code is not watched nor digested by Angular, thus we
     can safely $apply it */
  $scope.$apply(editModel);
});

І якщо ви знаєте, що ви робите, і працюєте над ізольованою невеликою директивою, коли є частиною великої програми Angular, ви можете віддати перевагу $ digest замість $ застосовувати для збереження виступу.

Оновлення з моменту Angularjs 1.2

Новий, потужний метод був доданий в будь-який $ обсязі: $evalAsync. В основному, він виконуватиме зворотний виклик у поточному циклі дайджесту, якщо такий відбувається, інакше новий цикл дайвінгу почне виконувати зворотний виклик.

Це все ще не так добре, як $scope.$digestякщо ви дійсно знаєте, що вам потрібно синхронізувати лише ізольовану частину HTML-коду (оскільки $applyбуде запущено нове , якщо жодне не виконується), але це найкраще рішення при виконанні функції який ви не можете знати, чи буде він виконаний синхронно чи ні , наприклад, після отримання ресурсу, який потенційно кешований: іноді це вимагатиме виклику асинхронізації на сервер, інакше ресурс буде локально отриманий синхронно.

У цих випадках та інших, де у вас було !$scope.$$phase, обов'язково використовуйте$scope.$evalAsync( callback )

Зручний маленький помічник, щоб зберегти цей процес ДУХИМ:

function safeApply(scope, fn) {
    (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
}

У мене була така ж проблема з сторонніми сценаріями, такими як CodeMirror, наприклад, Krpano, і навіть використання методів safeApply, згаданих тут, не вирішило для мене помилки.

Але що вирішило це, використовуючи службу $ timeout (не забудьте спочатку ввести її).

Таким чином, щось на кшталт:

$timeout(function() {
  // run my code safely here
})

і якщо ви використовуєте код, який ви використовуєте

це

можливо тому, що це всередині контролера заводської директиви або просто потрібна якась прив'язка, тоді ви зробите щось на кшталт:

.factory('myClass', [
  '$timeout',
  function($timeout) {

    var myClass = function() {};

    myClass.prototype.surprise = function() {
      // Do something suprising! :D
    };

    myClass.prototype.beAmazing = function() {
      // Here 'this' referes to the current instance of myClass

      $timeout(angular.bind(this, function() {
          // Run my code safely here and this is not undefined but
          // the same as outside of this anonymous function
          this.surprise();
       }));
    }

    return new myClass();

  }]
)

Див. Http://docs.angularjs.org/error/$rootScope:inprog

Проблема виникає, коли у вас є виклик, $applyякий іноді запускається асинхронно поза кодовим кодом (коли слід застосовувати $ apply), а іноді синхронно всередині кутового коду (що викликає $digest already in progressпомилку).

Це може статися, наприклад, коли у вас є бібліотека, яка асинхронно отримує елементи з сервера та кешує їх. Перший раз, коли запитується елемент, він буде отриманий асинхронно, щоб не блокувати виконання коду. Вдруге, однак, елемент вже знаходиться в кеші, тому його можна буде отримати синхронно.

Спосіб запобігання цієї помилки - забезпечити $applyасинхронний запуск коду, що викликає . Це можна зробити, запустивши свій код всередині дзвінка $timeoutз встановленою затримкою 0(яка є типовою). Однак виклик коду всередині $timeoutзнімає необхідність викликати $apply, оскільки $ timeout запустить ще один $digestцикл, який, у свою чергу, зробить усі необхідні оновлення тощо.

Рішення

Словом, замість цього:

... your controller code...

$http.get('some/url', function(data){
    $scope.$apply(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...

зробити це:

... your controller code...

$http.get('some/url', function(data){
    $timeout(function(){
        $scope.mydate = data.mydata;
    });
});

... more of your controller code...

Виклик лише $applyтоді, коли ви знаєте, який код працює, він завжди буде виконуватись поза кодовим кодом (наприклад, ваш дзвінок до $ застосовуватиметься всередині зворотного дзвінка, який викликається кодом поза вашим кодовим кодом).

Якщо хтось не знає про якийсь негативний недолік для використання $timeoutнад $apply, я не бачу, чому ви не завжди могли використовувати $timeout(з нульовою затримкою) замість цього $apply, оскільки це зробить приблизно те саме.

Коли ви отримуєте цю помилку, це в основному означає, що вона вже знаходиться в процесі оновлення вашого перегляду. Вам дійсно не потрібно телефонувати $apply()в контролер. Якщо ваш погляд не оновлюється так, як ви очікували, і ви отримуєте цю помилку після виклику $apply(), це, швидше за все, означає, що ви не правильно оновили модель. Якщо ви опублікуєте якусь специфіку, ми зможемо з'ясувати основну проблему.

Найкоротшою формою сейфу $applyє:

$timeout(angular.noop)

Ви також можете використовувати evalAsync. Він запуститься десь після закінчення дайджесту!

scope.evalAsync(function(scope){
    //use the scope...
});

Перш за все, не фіксуйте це таким чином

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

Це не має сенсу, оскільки $ фаза - це лише булевий прапор для циклу дайджестів $, тому ваш $ apply () іноді не запускається. І пам’ятайте, що це погана практика.

Натомість використовуйте $timeout

    $timeout(function(){ 
  // Any code in here will automatically have an $scope.apply() run afterwards 
$scope.myvar = newValue; 
  // And it just works! 
});

Якщо ви використовуєте підкреслення або позначення, ви можете використовувати defer ():

_.defer(function(){ 
  $scope.$apply(); 
});

Іноді ви все одно отримаєте помилки, якщо скористаєтесь цим способом ( https://stackoverflow.com/a/12859093/801426 ).

Спробуйте це:

if(! $rootScope.$root.$$phase) {
...

Ви повинні використовувати $ evalAsync або $ timeout відповідно до контексту.

Це посилання з хорошим поясненням:

http://www.bennadel.com/blog/2605-scope-evalasync-vs-timeout-in-angularjs.htm

спробуйте використовувати

$scope.applyAsync(function() {
    // your code
});

замість

if(!$scope.$$phase) {
  //$digest or $apply
}

$ applyAsync Графік виклику $ застосовуватиметься, щоб це відбулося пізніше. Це можна використовувати для встановлення черги на кілька виразів, які потрібно оцінити в одному дайджесті.

ПРИМІТКА. У межах дайджесту $ $ applicationAsync () буде промиватися лише у тому випадку, якщо поточна область є $ rootScope. Це означає, що якщо ви зателефонуєте $ digest у дочірній області, вона не буде неявно змивати чергу $ applyAsync ().

Приклад:

  $scope.$applyAsync(function () {
                if (!authService.authenticated) {
                    return;
                }

                if (vm.file !== null) {
                    loadService.setState(SignWizardStates.SIGN);
                } else {
                    loadService.setState(SignWizardStates.UPLOAD_FILE);
                }
            });

Список літератури:

1. Обсяг. $ ApplyAsync () проти Scope. $ EvalAsync () в AngularJS 1.3

2. Документи AngularJs

Я б радив вам скористатися спеціальною подією, а не викликати дайджест циклу.

Я з'ясував, що трансляція користувальницьких подій та реєстрація слухачів для цих подій є хорошим рішенням для запуску дії, яку ви хочете зробити, незалежно від того, чи перебуваєте ви в циклі дайджестів.

Створюючи власну подію, ви також ефективніше використовуєте свій код, оскільки ви запускаєте лише слухачів, підписаних на цю подію, а НЕ запускаєте всі годинники, прив’язані до області, як це було б, якщо ви посилаєтесь на область застосування.

$scope.$on('customEventName', function (optionalCustomEventArguments) {
   //TODO: Respond to event
});


$scope.$broadcast('customEventName', optionalCustomEventArguments);

yearofmoo зробив чудову роботу у створенні багаторазової функції $ safeApply для нас:

https://github.com/yearofmoo/AngularJS-Scope.SafeApply

Використання:

//use by itself
$scope.$safeApply();

//tell it which scope to update
$scope.$safeApply($scope);
$scope.$safeApply($anotherScope);

//pass in an update function that gets called when the digest is going on...
$scope.$safeApply(function() {

});

//pass in both a scope and a function
$scope.$safeApply($anotherScope,function() {

});

//call it on the rootScope
$rootScope.$safeApply();
$rootScope.$safeApply($rootScope);
$rootScope.$safeApply($scope);
$rootScope.$safeApply($scope, fn);
$rootScope.$safeApply(fn);

Мені вдалося вирішити цю проблему, зателефонувавши $evalне $applyв місця, де я знаю, що$digest функція буде працювати.

Згідно з документами , це в $applyосновному так:

function $apply(expr) {
  try {
    return $eval(expr);
  } catch (e) {
    $exceptionHandler(e);
  } finally {
    $root.$digest();
  }
}

У моєму випадку ng-clickзміна змінної в межах області, а $ watch на цій змінній змінює інші змінні, які повинні бути$applied . Цей останній крок викликає помилку "дайджест вже триває".

Замінивши $applyна$eval всередині виразу годин змінні сфери застосування оновлюються , як і очікувалося.

Отже, виявляється, що якщо дайджест все одно буде запущений через якусь іншу зміну в Angular, то $evalце все, що вам потрібно зробити.

використовувати $scope.$$phase || $scope.$apply();замість цього

Розуміння того, що кутові документи виклику перевірки $$phaseв антішаблон , я намагався отримати $timeoutі _.deferпрацювати.

Методи очікування та відкладеного часу створюють спалах нерозбірливого {{myVar}}вмісту в домі, як ПІДБУТ . Для мене це було неприйнятно. Це не дозволяє мені догматично сказати, що щось є злом, і не маю підходящої альтернативи.

Єдине, що працює щоразу:

if(scope.$$phase !== '$digest'){ scope.$digest() }.

Я не розумію небезпеки цього методу, або чому він описується як злом людей у ​​коментарях та кутовій команді. Команда здається точною та легкою для читання:

"Зробіть дайджест, якщо вже не відбувається"

У CoffeeScript це ще красивіше:

scope.$digest() unless scope.$$phase is '$digest'

У чому проблема з цим? Чи існує альтернатива, яка не створить FOUT? $ safeApply виглядає чудово, але також використовується $$phaseметод перевірки.

Це моя послуга:

angular.module('myApp', []).service('Utils', function Utils($timeout) {
    var Super = this;

    this.doWhenReady = function(scope, callback, args) {
        if(!scope.$$phase) {
            if (args instanceof Array)
                callback.apply(scope, Array.prototype.slice.call(args))
            else
                callback();
        }
        else {
            $timeout(function() {
                Super.doWhenReady(scope, callback, args);
            }, 250);
        }
    };
});

і це приклад його використання:

angular.module('myApp').controller('MyCtrl', function ($scope, Utils) {
    $scope.foo = function() {
        // some code here . . .
    };

    Utils.doWhenReady($scope, $scope.foo);

    $scope.fooWithParams = function(p1, p2) {
        // some code here . . .
    };

    Utils.doWhenReady($scope, $scope.fooWithParams, ['value1', 'value2']);
};

Я використовував цей метод, і він, здається, працює чудово. Це просто чекає часу, коли цикл закінчиться, а потім спрацьовує apply(). Просто зателефонуйте до цієї функції apply(<your scope>)з будь-якого місця.

function apply(scope) {
  if (!scope.$$phase && !scope.$root.$$phase) {
    scope.$apply();
    console.log("Scope Apply Done !!");
  } 
  else {
    console.log("Scheduling Apply after 200ms digest cycle already in progress");
    setTimeout(function() {
        apply(scope)
    }, 200);
  }
}

Коли я відключив налагоджувач, помилка більше не відбувається. У моєму випадку це було через те, що відладчик зупиняв виконання коду.

подібні до відповідей вище, але це надійно працювало для мене ... в службі додайте:

    //sometimes you need to refresh scope, use this to prevent conflict
    this.applyAsNeeded = function (scope) {
        if (!scope.$$phase) {
            scope.$apply();
        }
    };

Можна використовувати

$timeout

щоб запобігти помилці.

 $timeout(function () {
                        var scope = angular.element($("#myController")).scope();
                        scope.myMethod();
                        scope.$scope();
                    },1);

Проблема в основному виникає тоді, коли ми просимо кутовий запустити дайджест циклу, навіть незважаючи на те, що його процес перетворює проблему на точку розуміння. наслідок виключення в консолі.
1. Не має сенсу викликати область. $ Apply () всередині функції $ timeout, оскільки внутрішньо він робить те саме.
2. Код поширюється на функцію JavaScript ванілі, оскільки його власний не визначений кутовий кут, тобто setTimeout
3. Для цього можна скористатися

if (!
Obseg . $$ фаза) { obseg. $ EvalAsync (function () {

}); }

        let $timeoutPromise = null;
        $timeout.cancel($timeoutPromise);
        $timeoutPromise = $timeout(() => {
            $scope.$digest();
        }, 0, false);

Ось хороше рішення, щоб уникнути цієї помилки та уникати $ apply

Ви можете комбінувати це з debounce (0), якщо дзвонити на основі зовнішньої події. Вище наведено «дебютацію», яку ми використовуємо, та повний приклад коду

.factory('debounce', [
    '$timeout',
    function ($timeout) {

        return function (func, wait, apply) {
            // apply default is true for $timeout
            if (apply !== false) {
                apply = true;
            }

            var promise;
            return function () {
                var cntx = this,
                    args = arguments;
                $timeout.cancel(promise);
                promise = $timeout(function () {
                    return func.apply(cntx, args);
                }, wait, apply);
                return promise;
            };
        };
    }
])

і сам код, щоб прослухати якусь подію та зателефонувати в дайджест $ лише в потрібному вам обсязі $

        let $timeoutPromise = null;
        let $update = debounce(function () {
            $timeout.cancel($timeoutPromise);
            $timeoutPromise = $timeout(() => {
                $scope.$digest();
            }, 0, false);
        }, 0, false);

        let $unwatchModelChanges = $scope.$root.$on('updatePropertiesInspector', function () {
            $update();
        });


        $scope.$on('$destroy', () => {
            $timeout.cancel($update);
            $timeout.cancel($timeoutPromise);
            $unwatchModelChanges();
        });

Виявив це: https://coderwall.com/p/ngisma, де Натан Уокер (внизу сторінки) пропонує декоратор у $ rootScope для створення функцій "safeApply", код:

yourAwesomeModule.config([
  '$provide', function($provide) {
    return $provide.decorator('$rootScope', [
      '$delegate', function($delegate) {
        $delegate.safeApply = function(fn) {
          var phase = $delegate.$$phase;
          if (phase === "$apply" || phase === "$digest") {
            if (fn && typeof fn === 'function') {
              fn();
            }
          } else {
            $delegate.$apply(fn);
          }
        };
        return $delegate;
      }
    ]);
  }
]);

Це вирішить вашу проблему:

if(!$scope.$$phase) {
  //TODO
}