Por que usar if (! $ Scope. $$ phase) $ scope. $ Apply () é um antipadrão?

Às vezes, preciso usar $scope.$applyno meu código e às vezes gera um erro de "resumo já em andamento". Então, comecei a encontrar uma maneira de contornar isso e encontrei esta pergunta: AngularJS: Impedir o erro $ digest já em andamento ao chamar $ scope. $ Apply () . No entanto, nos comentários (e no wiki do angular) você pode ler:

Não faça if (! $ Scope. $$ phase) $ scope. $ Apply (), isso significa que $ scope. $ Apply () não é alto o suficiente na pilha de chamadas.

Então agora eu tenho duas perguntas:

1. Por que exatamente isso é um antipadrão?
2. Como posso usar $ scope. $ Apply com segurança?

Outra "solução" para evitar o erro "resumo já em andamento" parece estar usando $ timeout:

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

Aquele é o caminho para ir? É mais seguro? Portanto, aqui está a verdadeira questão: Como posso eliminar totalmente a possibilidade de um erro de "resumo já em andamento"?

PS: Estou usando apenas $ scope. $ Apply em callbacks não angularjs que não são síncronos. (pelo que eu sei, essas são situações em que você deve usar $ scope. $ apply se quiser que suas alterações sejam aplicadas)

Depois de mais algumas pesquisas, consegui resolver a questão de saber se é sempre seguro usar $scope.$apply. A resposta curta é sim.

Resposta longa:

Devido à forma como seu navegador executa Javascript, não é possível que duas chamadas de resumo entrem em conflito por acaso .

O código JavaScript que escrevemos não é executado de uma vez, mas em turnos. Cada uma dessas curvas é executada ininterruptamente do início ao fim e, quando uma curva está acontecendo, nada mais acontece em nosso navegador. (de http://jimhoskins.com/2012/12/17/angularjs-and-apply.html )

Portanto, o erro "resumo já em andamento" só pode ocorrer em uma situação: Quando um $ apply é emitido dentro de outro $ apply, por exemplo:

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

Esta situação não pode ocorrer se usarmos $ scope.apply em um callback não angularjs puro, como por exemplo o callback de setTimeout. Portanto, o código a seguir é 100% à prova de balas e não há necessidade de fazer umif (!$scope.$$phase) $scope.$apply()

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

mesmo este é seguro:

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

O que NÃO é seguro (porque $ timeout - como todos os ajudantes angularjs - já chama $scope.$applypor você):

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

Isso também explica por que o uso de if (!$scope.$$phase) $scope.$apply()é um antipadrão. Você simplesmente não precisa disso se usar $scope.$applyda maneira correta: Em um callback puro js como setTimeoutpor exemplo.

Leia http://jimhoskins.com/2012/12/17/angularjs-and-apply.html para obter uma explicação mais detalhada.

É definitivamente um antipadrão agora. Eu vi um resumo explodir mesmo se você verificar a fase $$. Você simplesmente não deve acessar a API interna indicada por $$prefixos.

Você deveria usar

 $scope.$evalAsync();

como este é o método preferido em Angular ^ 1.4 e é especificamente exposto como uma API para a camada de aplicativo.

Em qualquer caso, quando seu resumo está em andamento e você envia outro serviço para fazer o resumo, isso simplesmente dá um erro, ou seja, um resumo já está em andamento. então, para curar isso, você tem duas opções. você pode verificar se há outro resumo em andamento, como uma votação.

Primeiro

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

se a condição acima for verdadeira, você pode aplicar seu $ escopo. $ aplicar de outra forma não e

a segunda solução é usar $ timeout

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

ele não permitirá que o outro resumo comece até $ timeout completar sua execução.

scope.$applydesencadeia um $digestciclo que é fundamental para a vinculação de dados bidirecional

Um $digestciclo verifica se há objetos, ou seja, modelos (para ser mais preciso $watch) anexados para $scopeavaliar se seus valores mudaram e se ele detecta uma mudança, ele executa as etapas necessárias para atualizar a visualização.

Agora, quando você usa, $scope.$applyencontra um erro "Já em andamento", então é bastante óbvio que um $ digest está sendo executado, mas o que o acionou?

ans -> todas as $httpchamadas, todos os ng-click, repetir, mostrar, ocultar etc acionam um $digestciclo E A PIOR PARTE FUNCIONA EM CADA $ ESCOPO.

ou seja, digamos que sua página tenha 4 controladores ou diretivas A, B, C, D

Se você tiver 4 $scopepropriedades em cada um deles, terá um total de 16 $ propriedades de escopo em sua página.

Se você disparar $scope.$applyno controlador D, um $digestciclo verificará todos os 16 valores !!! mais todas as propriedades $ rootScope.

Resposta -> mas $scope.$digestaciona um $digestfilho e o mesmo escopo, portanto, verificará apenas 4 propriedades. Portanto, se você tiver certeza de que as mudanças em D não afetarão A, B, C, use $scope.$digest não $scope.$apply.

Portanto, um mero ng-click ou ng-show / hide pode disparar um $digestciclo em mais de 100 propriedades, mesmo quando o usuário não disparou nenhum evento !

Use $timeout, é a forma recomendada.

Meu cenário é que preciso alterar itens na página com base nos dados que recebi de um WebSocket. E como está fora do Angular, sem o $ timeout, o único modelo será alterado, mas não a visualização. Porque o Angular não sabe que esse dado foi alterado. $timeoutbasicamente diz ao Angular para fazer a alteração na próxima rodada de $ digest.

Tentei o seguinte também e funcionou. A diferença para mim é que $ timeout é mais claro.

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

Achei uma solução muito legal:

.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();
            }
        }
    }
}])

injete onde você precisa:

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