Чому використовується if (! $ Scope. $$ phase) $ scope. $ Apply () анти-шаблон?

Іноді мені потрібно використовувати $scope.$applyв моєму коді, а іноді він видає помилку "Дайджест вже триває". Тож я почав знаходити спосіб обійти це питання і знайшов таке запитання: AngularJS: Запобігти помилці $ digest, яка вже виконується при виклику $ scope. $ Apply () . Однак у коментарях (і на кутовій вікі) ви можете прочитати:

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

Отже, зараз у мене є два запитання:

1. Чому саме це анти-шаблон?
2. Як я можу безпечно використовувати $ scope. $ Застосувати?

Ще одне "рішення" для запобігання помилці "дайджест вже триває", схоже, використовує $ timeout:

$timeout(function() {
  //...
});

Це такий шлях? Чи безпечніше? Тож ось справжнє запитання: Як я можу повністю виключити можливість помилки "дайджест, який вже виконується"?

PS: Я використовую лише $ scope. $ Застосовується у зворотних викликах, які не є синхронними. (наскільки я знаю, це ситуації, коли ви повинні використовувати $ scope. $ apply, якщо ви хочете, щоб ваші зміни були застосовані)

Після ще кількох копань я зміг вирішити питання, чи завжди це безпечно використовувати $scope.$apply. Коротка відповідь - так.

Довга відповідь:

Через те, як ваш браузер виконує Javascript, неможливо випадково зіткнутися два дайджест-дзвінки .

Код JavaScript, який ми пишемо, не всі виконується за один раз, натомість він виконується по черзі. Кожен з цих поворотів виконується безперервно від початку до кінця, і коли поворот працює, у нашому браузері нічого іншого не відбувається. (з http://jimhoskins.com/2012/12/17/angularjs-and-apply.html )

Отже, помилка "дайджест, що вже виконується" може трапитися лише в одній ситуації: Коли заявка $ видається всередині іншої $ apply, наприклад:

$scope.apply(function() {
  // some code...
  $scope.apply(function() { ... });
});

Ця ситуація не може виникнути, якщо ми використовуємо $ scope.apply в чистому зворотному виклику, не пов'язаному з angularjs, як, наприклад, зворотний виклик setTimeout. Отже, наступний код на 100% захищений від кулі, і немає необхідності робити aif (!$scope.$$phase) $scope.$apply()

setTimeout(function () {
    $scope.$apply(function () {
        $scope.message = "Timeout called!";
    });
}, 2000);

навіть цей безпечний:

$scope.$apply(function () {
    setTimeout(function () {
        $scope.$apply(function () {
            $scope.message = "Timeout called!";
        });
    }, 2000);
});

Що НЕ безпечно (адже $ timeout - як і всі помічники angularjs - вже вимагає $scope.$applyдля вас):

$timeout(function () {
    $scope.$apply(function () {
        $scope.message = "Timeout called!";
    });
}, 2000);

Це також пояснює, чому використання if (!$scope.$$phase) $scope.$apply()є анти-шаблоном. Вам це просто не потрібно, якщо ви використовуєте $scope.$applyправильно: у чистому зворотному виклику js, як setTimeoutнаприклад.

Прочитайте http://jimhoskins.com/2012/12/17/angularjs-and-apply.html для більш детального пояснення.

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

Ви повинні використовувати

 $scope.$evalAsync();

оскільки це найкращий метод у Angular ^ 1.4 і спеціально представлений як API для прикладного рівня.

У будь-якому випадку, коли ваш дайджест триває, і ви натискаєте іншу службу на дайджест, він просто видає помилку, тобто дайджест, який вже виконується. отже, щоб вилікувати це, у вас є два варіанти. Ви можете перевірити будь-який інший дайджест, наприклад, опитування.

Перший

if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
    $scope.$apply();
}

якщо вищевказана умова відповідає дійсності, тоді ви можете застосувати свій $ scope. $ apply otherwies not та

Другим рішенням є використання $ timeout

$timeout(function() {
  //...
})

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

scope.$applyзапускає $digestцикл, який є фундаментальним для двостороннього прив'язки даних

А $digestперевірки циклу для об'єктів , тобто моделі (щоб бути точним $watch) , приєднані до $scopeоцінювати , якщо їх значення змінилися , і якщо він виявляє зміни , то він вживає необхідних заходів , щоб оновити уявлення.

Тепер, коли ви використовуєте, $scope.$applyви стикаєтеся з помилкою "Вже виконується", тому цілком очевидно, що працює дайджест $, але що його спричинило?

ans -> кожні $httpдзвінки, всі клацання, повтор, показ, приховування тощо запускають $digestцикл І НАЙГОРІША ЧАСТИНА, ЯКА ЗАБІГАЄ КОЖНОГО СФЕРИ ОБМЕЖЕННЯ.

тобто скажімо, на вашій сторінці є 4 контролери або директиви A, B, C, D

Якщо у вас є 4 $scopeвластивості в кожному з них, то у вас на вашій сторінці в цілому 16 $ властивостей області.

Якщо ви вмикаєте $scope.$applyконтролер D, тоді $digestцикл перевірятиме всі 16 значень !!! плюс усі властивості $ rootScope.

Відповідь -> але $scope.$digestспрацьовує a $digestна дочірній і тій же області дії, тому він перевірить лише 4 властивості. Отже, якщо ви впевнені, що зміни D не вплинуть на A, B, C, тоді не використовуйте $scope.$digest $scope.$apply.

Отже, просто натискання клавіші ng-show / ng-show / hide може викликати $digestцикл для понад 100 властивостей, навіть коли користувач не запускав жодної події !

Використовуйте $timeout, це рекомендований спосіб.

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

Я також спробував наступне, і це працює. Для мене різниця в тому, що $ таймаут чіткіший.

setTimeout(function(){
    $scope.$apply(function(){
        // changes
    });
},0)

Я знайшов дуже круте рішення:

.factory('safeApply', [function($rootScope) {
    return function($scope, fn) {
        var phase = $scope.$root.$$phase;
        if (phase == '$apply' || phase == '$digest') {
            if (fn) {
                $scope.$eval(fn);
            }
        } else {
            if (fn) {
                $scope.$apply(fn);
            } else {
                $scope.$apply();
            }
        }
    }
}])

вводьте туди, де вам потрібно:

.controller('MyCtrl', ['$scope', 'safeApply',
    function($scope, safeApply) {
        safeApply($scope); // no function passed in
        safeApply($scope, function() { // passing a function in
        });
    }
])