Accediendo a $scope de AngularJS desde jQuery

No es lo más normal hacer esto, se supone que la web en la que estamos trabajando, por comodidad, debería solo tener una de estas dos tecnologías.

A veces se da el caso de que a pesar de que nuestra web en el lado cliente trabaja con AngularJS, tiene algún plugin hecho en jQuery y es ahí cuando, por el motivo que sea, nuestro plugin de jQuery necesita acceder a datos que controlar nuestro script de Angular.

Vamos a ver como podémos acceder a él para que el plugin de jQuery pueda funcionar con estos datos.

En este ejemplo, generaremos la fecha del día de hoy en AngularJS y la obtendrémos luego en una función para mostrarla mediente jQuery.

1 – HTML donde:

  • Inicializaremos nuestra directiva ng-app
  • Añadiremos un id a una etiqueta H1 para acceder más tarde mediente jQuery
  • Añadiremos un botón que llamará a la función que obtendrá la fecha desde el $scope de Angular para mostrarla en el H1 con jQuery.

2 – Código Angular con nuestro controlador y la fecha.

3 – Código javascript / jQuery para mostrar la fecha.

El truco para acceder es mediante la siguiente línea de código:

var date = angular.element($('[ng-controller="myController"]')).scope().getDate();

A través de la variable global angular y su función element(), la cual le pasamos el parámetro que hace referencia a nuestro controlador obtenido con jQuery ($), accedemos a su scope y posteriormente a función getDate() de nuestro controlador de Angular.

Un poco enrevesado, pero a veces hay que buscar alternativas!

Espero que te pueda ser útil la explicación, si se te da el caso de tener que usarla.

</nosvemos>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *