Valor de actualización de AngularJS desde la devolución de llamada AJAX

Question

Cuando actualizo el valor de ámbito directamente, se actualiza a la vista muy bien, pero cuando este valor se actualiza desde la devolución de llamada AJAX, no se actualiza. Aquí está el ejemplo simplificado: http://jsfiddle.net/hS8Bs/1/

¿Cómo puedo evitarlo?

Actualización: Me di cuenta de que al hacer clic por segunda vez en el enlace actualizo el valor, pero no es lo que estoy buscando.

Answer 1

El problema real es la falta de $scope.$apply. Cuando esté actualizando el modelo angular fuera del resumen angular, debe usar apply.

$.getJSON('/echo/json/', {}, function(data){ 
    $scope.$apply(function(){ 
     $scope.period = '2010 - 2011'; 
    }); 
});  

Esto desencadenará la diggest para ver la actualización y si el código dentro de aplicar una excepción será redirigido al servicio $exceptionHandler.

Answer 2

Aquí está su missing tutorial que necesita para usar el parámetro $ http del controlador para poder actualizar el campo. Compruebe su ejemplo actualizado http://jsfiddle.net/hS8Bs/2/

Answer 3

Este es un complemento de la respuesta seleccionada, encontré que Angular JS todavía se llamaba "Error: $ digest ya en progreso" cuando implementé la función $ apply().

así que encontré Will Vincent's código en este post: AngularJS : What's the Angular way to interact with a form? , comprueba $ digerir ya en curso y sólo iguala $ aplicar() cuando sea seguro:

$scope.safeApply = function(fn) { 
    var phase = this.$root.$$phase; 
    if(phase == '$apply' || phase == '$digest') { 
     if(fn && (typeof(fn) === 'function')) { 
      fn(); 
     } 
    } else { 
     this.$apply(fn); 
    } 
}; 

por lo que sería algo así como:

$scope.safeApply(function() { ...code here... });