¿Por qué usar if (! $ Scope. $$ phase) $ scope. $ Apply () es un anti-patrón?

A veces necesito usar $scope.$applyen mi código y, a veces, arroja un error de "resumen ya en progreso". Así que comencé a encontrar una manera de evitar esto y encontré esta pregunta: AngularJS: Prevenga el error $ digest ya en progreso al llamar a $ scope. $ Apply () . Sin embargo, en los comentarios (y en la wiki angular) puedes leer:

No lo haga si (! $ Scope. $$ phase) $ scope. $ Apply (), significa que su $ scope. $ Apply () no es lo suficientemente alto en la pila de llamadas.

Entonces ahora tengo dos preguntas:

1. ¿Por qué exactamente es esto un anti-patrón?
2. ¿Cómo puedo usar $ scope. $ De forma segura?

Otra "solución" para evitar el error "resumen ya en progreso" parece estar usando $ timeout:

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

¿Es ese el camino a seguir? Es mas seguro? Entonces, aquí está la pregunta real: ¿Cómo puedo eliminar por completo la posibilidad de un error de "resumen ya en progreso"?

PD: solo estoy usando $ scope. $ Apply en devoluciones de llamada no angularjs que no son síncronas. (hasta donde yo sé, esas son situaciones en las que debe usar $ scope. $ apply si desea que se apliquen sus cambios)

Después de investigar un poco más, pude resolver la pregunta de si siempre es seguro de usar $scope.$apply. La respuesta corta es sí.

Respuesta larga:

Debido a la forma en que su navegador ejecuta Javascript, no es posible que dos llamadas de resumen colisionen por casualidad .

El código JavaScript que escribimos no se ejecuta de una vez, sino que se ejecuta por turnos. Cada uno de estos turnos se ejecuta sin interrupciones de principio a fin, y cuando se ejecuta un turno, no sucede nada más en nuestro navegador. (de http://jimhoskins.com/2012/12/17/angularjs-and-apply.html )

Por lo tanto, el error "resumen ya en progreso" solo puede ocurrir en una situación: cuando se emite un $ aplicar dentro de otro $ aplicar, por ejemplo:

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

Esta situación no puede surgir si usamos $ scope.apply en una devolución de llamada pura no angularjs, como por ejemplo la devolución de llamada de setTimeout. Por lo que el siguiente código es 100% a prueba de balas y no hay ninguna necesidad de hacer unaif (!$scope.$$phase) $scope.$apply()

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

incluso este es seguro:

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

Lo que NO es seguro (porque $ timeout, como todos los ayudantes de angularjs, ya lo llama $scope.$apply):

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

Esto también explica por qué el uso de if (!$scope.$$phase) $scope.$apply()es un anti-patrón. Simplemente no lo necesita si lo usa $scope.$applyde la manera correcta: en una devolución de llamada js pura como, setTimeoutpor ejemplo.

Lea http://jimhoskins.com/2012/12/17/angularjs-and-apply.html para obtener una explicación más detallada.

Definitivamente ahora es un anti-patrón. He visto explotar un resumen incluso si compruebas la fase $$. No se supone que acceda a la API interna indicada por $$prefijos.

Deberías usar

 $scope.$evalAsync();

ya que este es el método preferido en Angular ^ 1.4 y se expone específicamente como una API para la capa de aplicación.

En cualquier caso, cuando su resumen está en progreso y presiona otro servicio para que lo haga, simplemente da un error, es decir, el resumen ya está en progreso. así que para curar esto tienes dos opciones. puede comprobar si hay otro resumen en curso, como sondeos.

El primero

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

si la condición anterior es verdadera, entonces puede aplicar su $ scope. $ aplicar de otro modo y no

la segunda solución es usar $ timeout

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

no permitirá que el otro resumen comience hasta que $ timeout complete su ejecución.

scope.$applydesencadena un $digestciclo que es fundamental para el enlace de datos bidireccional

Un $digestciclo busca objetos, es decir, modelos (para ser precisos $watch) adjuntos para $scopeevaluar si sus valores han cambiado y si detecta un cambio, entonces toma los pasos necesarios para actualizar la vista.

Ahora, cuando usa, $scope.$applyse enfrenta a un error "Ya en progreso", por lo que es bastante obvio que se está ejecutando un $ digest, pero ¿qué lo desencadenó?

ans -> cada $httpllamada, todo ng-click, repetir, mostrar, ocultar, etc. desencadenan un $digestciclo Y LA PEOR PARTE SE EJECUTA DE CADA $ ALCANCE.

es decir, digamos que su página tiene 4 controladores o directivas A, B, C, D

Si tiene 4 $scopepropiedades en cada una de ellas, entonces tiene un total de 16 propiedades $ scope en su página.

¡Si dispara $scope.$applyen el controlador D, un $digestciclo comprobará los 16 valores! más todas las propiedades de $ rootScope.

Respuesta -> pero $scope.$digestactiva un $digesthijo y el mismo alcance, por lo que solo verificará 4 propiedades. Entonces, si está seguro de que los cambios en D no afectarán a A, B, C, use $scope.$digest not $scope.$apply.

Por lo tanto, un simple clic ng o ng-show / hide podría desencadenar un $digestciclo en más de 100 propiedades, ¡incluso cuando el usuario no ha disparado ningún evento !

Utilizar $timeout, es la forma recomendada.

Mi escenario es que necesito cambiar elementos en la página según los datos que recibí de un WebSocket. Y como está fuera de Angular, sin $ timeout, se cambiará el único modelo, pero no la vista. Porque Angular no sabe que se ha cambiado ese dato. $timeoutbásicamente le está diciendo a Angular que haga el cambio en la siguiente ronda de $ digest.

Intenté lo siguiente también y funciona. La diferencia para mí es que $ timeout es más claro.

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

Encontré una solución muy buena:

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

inyecte eso donde lo necesite:

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