2012-09-06 41 views
131

Tengo un evento de clic que ocurre fuera del alcance de mi directiva personalizada, así que en lugar de usar el atributo "ng-clic", estoy usando un oyente jQuery.click() y llamar a una función dentro de mi alcance, así:Cómo puedo decirle a AngularJS que "actualice"

$('html').click(function(e) { 
    scope.close(); 
); 

close() es una función simple que se parece a esto:

scope.close = function() { 
    scope.isOpen = false; 
} 

En mi opinión, tengo un elemento con "nG-show" atado a es Abrir así:

<div ng-show="isOpen">My Div</div> 

Al depurar, encuentro que se llama a close(), isOpen se está actualizando a falso, pero la vista de AngularJS no se está actualizando. ¿Hay alguna manera de decirle manualmente a Angular que actualice la vista? ¿O hay un enfoque más "angular" para resolver este problema que no estoy viendo?

Respuesta

243

La solución fue llamar ...

$scope.$apply(); 

... en mi caso de devolución de llamada jQuery.

+9

Este enlace será útil, creo. http://jimhoskins.com/2012/12/17/angularjs-and-apply.html – sorx00

+6

¿no debería ser '$ scope. $ Apply();'? – ErichBSchulz

+0

Puede usar tanto $ scope como scope, es solo una diferencia de notación pero resulta en lo mismo. – user1226868

10

Uso

$route.reload(); 

recordar para inyectar $route a su controlador.

+1

Además, cuando use el enrutador ui, asegúrese de usar '$ state.reload()' –

12

¿Por qué llamar al $apply?

TL; DR: $apply deberían ser llamados cada vez que desee aplicar los cambios realizados fuera del mundo angular.


Sólo para actualizar @Dustin's answer, aquí es una explicación de lo que $apply hace exactamente y por qué funciona.

$apply() se utiliza para ejecutar una expresión en AngularJS desde fuera de el marco AngularJS. (Por ejemplo, desde eventos DOM del navegador, setTimeout, XHR o bibliotecas de terceros). Debido a que llamamos al , el marco AngularJS necesitamos realizar el ciclo de vida del alcance adecuado de exception handling, executing watches.

Angular permite cualquier valor para ser utilizado como un objetivo vinculante. Luego, al final de cualquier código JavaScript, verifica si el valor ha cambiado. Ese paso que verifica si los valores de enlace han cambiado realmente tiene un método, $scope.$digest()1. Casi nunca lo llamamos directamente, ya que usamos $scope.$apply() (que llamará al $scope.$digest).

Angular solo monitorea variables usadas en expresiones y cualquier cosa dentro de un $watch que viva dentro del alcance.Por lo tanto, si cambia el modelo fuera del contexto angular, deberá llamar al $scope.$apply() para que esos cambios se propaguen; de lo contrario, Angular no sabrá que se han modificado, por lo que no se actualizará el enlace 2.

+1

. Apreciar las respuestas con explicaciones. Gracias. – cheshireoctopus

Cuestiones relacionadas