AngularJS maneja el mecanismo de vinculación de datos con la ayuda de tres potentes funciones: $watch() , $digest() y $apply() . La mayoría de las veces, AngularJS llamará a $scope.$watch() y $scope.$digest(), pero en algunos casos es posible que deba llamar a estas funciones manualmente para actualizar con nuevos valores.

$reloj() :-

Esta función se usa para observar cambios en una variable en el $scope. Acepta tres parámetros: expresión, oyente y objeto de igualdad, donde oyente y objeto de igualdad son parámetros opcionales.

$resumen() -

Esta función itera a través de todos los relojes en el objeto $scope y sus objetos secundarios $scope
(si tiene alguno). Cuando $digest() itera sobre los relojes, verifica si el valor de la expresión ha cambiado. Si el valor ha cambiado, AngularJS llama al oyente con un valor nuevo y un valor anterior. La función $digest() se llama cada vez que AngularJS cree que es necesario. Por ejemplo, después de hacer clic en un botón o después de una llamada AJAX. Es posible que tenga algunos casos en los que AngularJS no llame a la función $digest() por usted. En ese caso tienes que llamarlo tú mismo.

$aplicar() -

Angular do actualiza automática y mágicamente solo aquellos cambios de modelo que están dentro del contexto de AngularJS. Cuando cambia en cualquier modelo fuera del contexto de Angular (como eventos DOM del navegador, setTimeout, XHR o bibliotecas de terceros), debe informar a Angular de los cambios llamando a $apply() manualmente. Cuando la llamada a la función $apply() finaliza, AngularJS llama a $digest() internamente, por lo que todos los enlaces de datos se actualizan.

Explicación con imágenes:

El enlace de datos necesita un mapeo

La referencia en el alcance no es exactamente la referencia en la plantilla. Cuando vincula dos objetos, necesita un tercero que escuche el primero y modifique el otro.

Aquí, cuando modificas <input> , tocas data-ref3 . Y el mecanismo clásico de enlace de datos cambiará data-ref4 . Entonces, ¿cómo se moverán las otras expresiones {{data}} ?

Los eventos llevan a $digest()

Angular mantiene un oldValue y un valor newValue de cada enlace. Y después de cada evento de Angular , el famoso bucle $digest() verificará WatchList para ver si algo cambió. Estos eventos angulares son ng-click , ng-change , $http completado... El $digest() se repetirá siempre que cualquier oldValue newValue del valor nuevo.

En la imagen anterior, notará que data-ref1 y data-ref2 han cambiado.

Conclusiones

Es un poco como el huevo y el pollo. Nunca se sabe quién comienza, pero es de esperar que funcione la mayor parte del tiempo como se esperaba.

El otro punto es que puede comprender fácilmente el impacto profundo de un enlace simple en la memoria y la CPU. Con suerte, los escritorios son lo suficientemente gordos para manejar esto. Los teléfonos móviles no son tan fuertes.

AngularJs admite el enlace de datos bidireccional .
Significa que puede acceder a los datos Ver -> Controlador y controlador -> Ver

por ej.

1)

 // If $scope have some value in Controller. $scope.name = "Peter"; // HTML <div> {{ name }} </div>

O/P

 Peter

Puede vincular datos en ng-model Me gusta: -
2)

 <input ng-model="name" /> <div> {{ name }} </div>

Aquí, en el ejemplo anterior, cualquier entrada que dé el usuario, será visible en la etiqueta <div> .

Si desea vincular la entrada de html al controlador: -
3)

 <form name="myForm" ng-submit="registration()"> <label> Name </lbel> <input ng-model="name" /> </form>

Aquí, si desea usar el name de entrada en el controlador, entonces,

 $scope.name = {}; $scope.registration = function() { console.log("You will get the name here ", $scope.name); };

ng-model une nuestra vista y la representa en la expresión {{ }} .
ng-model son los datos que se muestran al usuario en la vista y con los que el usuario interactúa.
Por lo tanto, es fácil vincular datos en AngularJs.

Angular.js crea un observador para cada modelo que creamos a la vista. Cada vez que se cambia un modelo, se agrega una clase "ng-dirty" al modelo, por lo que el observador observará todos los modelos que tienen la clase "ng-dirty" y actualizará sus valores en el controlador y viceversa.

1. El enlace de datos unidireccional es un enfoque en el que se toma un valor del modelo de datos y se inserta en un elemento HTML. No hay forma de actualizar el modelo desde la vista. Se utiliza en sistemas de plantilla clásicos. Estos sistemas enlazan datos en una sola dirección.

2. El enlace de datos en aplicaciones Angular es la sincronización automática de datos entre el modelo y los componentes de la vista.

El enlace de datos le permite tratar el modelo como la fuente única de la verdad en su aplicación. La vista es una proyección del modelo en todo momento. Si se cambia el modelo, la vista refleja el cambio y viceversa.

el enlace de datos:

¿Qué es el enlace de datos?

Cada vez que el usuario cambia los datos en la vista, se produce una actualización de ese cambio en el modelo de alcance, y viceversa.

¿Como es posible?

Respuesta corta: con la ayuda del ciclo de digestión.

Descripción: Angular js establece el observador en el modelo de alcance, que activa la función de escucha si hay un cambio en el modelo.

 $scope.$watch('modelVar' , function(newValue,oldValue){

//Código de actualización de Dom con nuevo valor

});

Entonces, ¿cuándo y cómo se llama la función de observador?

La función de observador se llama como parte del ciclo de resumen.

El ciclo de resumen se llama activado automáticamente como parte de las directivas/servicios incorporados de angular js como ng-model, ng-bind, $timeout, ng-click y otros... que le permiten activar el ciclo de resumen.

Función del ciclo de digestión:

 $scope.$digest() -> digest cycle against the current scope. $scope.$apply() -> digest cycle against the parent scope

es decir $rootScope.$apply()

Nota: $apply() es igual a $rootScope.$digest(), esto significa que la verificación sucia comienza directamente desde la raíz o desde la parte superior o desde el ámbito principal hasta todos los $ámbitos secundarios en la aplicación angular js.

Las características anteriores funcionan en los navegadores IE para las versiones mencionadas también simplemente asegurándose de que su aplicación sea una aplicación angular js, lo que significa que está utilizando el archivo de secuencia de comandos angularjs framework al que se hace referencia en la etiqueta de secuencia de comandos.

Gracias.

Este es mi entendimiento básico. ¡Puede que esté mal!

1. Los elementos se observan pasando una función (devolviendo el elemento que se va a observar) al método $watch .
2. Los cambios en los elementos observados deben realizarse dentro de un bloque de código envuelto por el método $apply .
3. Al final de $apply , se invoca el método $digest que pasa por cada uno de los relojes y verifica si cambiaron desde la última vez que se ejecutó $digest .
4. Si se encuentran cambios, se vuelve a invocar el resumen hasta que todos los cambios se estabilicen.

En el desarrollo normal, la sintaxis de enlace de datos en el HTML le dice al compilador AngularJS que cree los relojes para usted y los métodos del controlador ya se ejecutan dentro $apply . Entonces, para el desarrollador de la aplicación, todo es transparente.

Yo mismo me pregunté esto por un tiempo. Sin setters, ¿cómo nota AngularJS los cambios en el objeto $scope ? ¿Los sondea?

Lo que realmente hace es esto: cualquier lugar "normal" en el que modifique el modelo ya fue llamado desde las entrañas de AngularJS , por lo que automáticamente llama a $apply por usted después de que se ejecuta su código. Digamos que su controlador tiene un método que está conectado a ng-click en algún elemento. Debido a que AngularJS conecta la llamada de ese método para usted, tiene la posibilidad de hacer $apply en el lugar apropiado. Del mismo modo, para las expresiones que aparecen directamente en las vistas, AngularJS las ejecuta, por lo que hace $apply .

Cuando la documentación habla de tener que llamar a $apply manualmente para el código fuera de AngularJS , se trata de un código que, cuando se ejecuta, no proviene de AngularJS en sí mismo en la pila de llamadas.

Aquí hay un ejemplo de enlace de datos con AngularJS, usando un campo de entrada. lo explicaré más tarde

código HTML

 <div ng-app="myApp" ng-controller="myCtrl" class="formInput"> <input type="text" ng-model="watchInput" Placeholder="type something"/> <p>{{watchInput}}</p> </div>

Código AngularJS

 myApp = angular.module ("myApp", []); myApp.controller("myCtrl", ["$scope", function($scope){ //Your Controller code goes here }]);

Como puede ver en el ejemplo anterior, AngularJS usa ng-model para escuchar y observar lo que sucede en los elementos HTML, especialmente en los campos de input . Cuando algo suceda, haz algo. En nuestro caso, ng-model se vincula a nuestra vista, usando la notación de bigote {{}} . Todo lo que se escribe dentro del campo de entrada se muestra en la pantalla al instante. Y esa es la belleza del enlace de datos, usando AngularJS en su forma más simple.

Espero que esto ayude.

Vea un ejemplo de trabajo aquí en Codepen

Sucedió que necesitaba vincular un modelo de datos de una persona con un formulario, lo que hice fue un mapeo directo de los datos con el formulario.

Por ejemplo, si el modelo tuviera algo como:

 $scope.model.people.name

La entrada de control del formulario:

 <input type="text" name="namePeople" model="model.people.name">

De esa forma, si modifica el valor del controlador del objeto, esto se reflejará automáticamente en la vista.

Un ejemplo en el que pasé el modelo se actualiza a partir de los datos del servidor es cuando solicita un código postal y un código postal basado en cargas escritas una lista de colonias y ciudades asociadas con esa vista, y de forma predeterminada establece el primer valor con el usuario. Y esto me funciono muy bien, lo que si pasa, es que angularJS a veces tarda unos segundos en refrescar el modelo, para hacer esto puedes poner un spinner mientras se muestran los datos.

Misko ya dio una excelente descripción de cómo funcionan los enlaces de datos, pero me gustaría agregar mi punto de vista sobre el problema de rendimiento con el enlace de datos.

Como dijo Misko, alrededor de 2000 enlaces es donde comienzas a ver problemas, pero de todos modos no deberías tener más de 2000 piezas de información en una página. Esto puede ser cierto, pero no todos los enlaces de datos son visibles para el usuario. Una vez que comience a crear cualquier tipo de widget o cuadrícula de datos con enlace bidireccional, puede alcanzar fácilmente 2000 enlaces, sin tener una mala experiencia de usuario.

Considere, por ejemplo, un cuadro combinado donde puede escribir texto para filtrar las opciones disponibles. Este tipo de control podría tener ~150 elementos y seguir siendo muy útil. Si tiene alguna característica adicional (por ejemplo, una clase específica en la opción seleccionada actualmente), comienza a obtener 3-5 enlaces por opción. Coloque tres de estos widgets en una página (por ejemplo, uno para seleccionar un país, el otro para seleccionar una ciudad en dicho país y el tercero para seleccionar un hotel) y ya estará entre 1000 y 2000 enlaces.

O considere una cuadrícula de datos en una aplicación web corporativa. 50 filas por página no es irrazonable, cada una de las cuales podría tener de 10 a 20 columnas. Si construye esto con ng-repeats, y/o tiene información en algunas celdas que usa algunos enlaces, podría estar acercándose a 2000 enlaces solo con esta cuadrícula.

Considero que esto es un gran problema cuando trabajo con AngularJS, y la única solución que he podido encontrar hasta ahora es construir widgets sin usar enlaces bidireccionales, en lugar de usar ngOnce, cancelar el registro de observadores y trucos similares, o construir directivas que construyen el DOM con jQuery y manipulación DOM. Siento que esto anula el propósito de usar Angular en primer lugar.

Me encantaría escuchar sugerencias sobre otras formas de manejar esto, pero tal vez debería escribir mi propia pregunta. Quería poner esto en un comentario, pero resultó ser demasiado largo para eso...

TL;DR
El enlace de datos puede causar problemas de rendimiento en páginas complejas.