Alcance angular
En aplicaciones web construidas con Angular, el concepto de alcance es a lo largo de él. Muchas instrucciones en la vista angular crearán un alcance, como Ng-App, Ng-Controller, etc. Este alcance es $scope (versión antes de Angular1.2) inyectamos al escribir constructores de controladores. Es un concepto en el modelo View. Nuestro modelo de datos se define en el alcance.
Pozo de alcance angular
Las personas que han usado Angular deben pasar por un proceso, es decir, cuando eran un novato al principio, acaban de ver la vinculación de datos bidireccional.
Pojo de alcance 1 en angular
No importa cómo comenzó a usarlo directamente, lo ataría de una vez. Después de la encuadernación, si tiene suerte (el viejo pájaro que comprende el principio del alcance angular lo ignora), entonces la encuadernación de dos vías comenzará a funcionar como se esperaba. En este momento, también sentimos que somos tan poderosos que podemos darnos cuenta de "vinculación bidireccional" tan rápido, que es una nueva característica de la que no se ha oído hablar.
Entonces, ¿por qué lo anterior dice que la vinculación de dos vías funciona correctamente por la buena suerte? Porque cuando los novatos comenzaron a aprender Angular, simplemente leyeron el tutorial y cambiaron el código para lograr sus necesidades comerciales. Incluso si hay algunos jugadores que pueden aprender documentos oficiales al principio, siguen siendo una minoría. Por lo tanto, la mayoría de los amigos que acaban de aprender Angular en realidad no entienden los principios, pero piensan que ya saben cómo usarlos.
Después de decir tanto, echemos un vistazo a la situación en la que un novato comienza a especificar un modelo de datos en el alcance y lo vincule en direcciones bidireccionales. En este caso, se encontrará con la trampa mencionada anteriormente. Primero echemos un vistazo al código.
// html <div ng ng-Controller = "outerCtrl"> <span ng-Bind = "a" a "</span> <div ng-concontroller =" innerCtrl " OUTERCTRL ($ ESCOPE) {$ scope.a = 1;} function innerCtrl () {}El código anterior es un ejemplo extremadamente simple de vinculación bidireccional. Después de cargar la página, 1 se mostrará en el DIV externo y el Div interno. Cuando se presiona el botón Incremento, encontrará que solo el 1 interno se convierte en 2. Lo mismo es cierto para continuar presionando, solo aumentará el número interno. Entonces, en este momento, los novatos a menudo se asustan. ¿Qué pasa con la mágica vinculación bidireccional que se acordó?
Pojo de alcance 2 en angular
En este momento, el bebé era un poco emocional. Subió a stackoverflow y los documentos oficiales. Finalmente, descubrió que había una solución, como escribir A como data.a atributos. A de un objeto:
// html <div ng-controller = "ourterCtrl"> <span ng-bind = "data.a"> </span> <div ng-concontroller = "innerctrl"> <span ng-bind = "data.a"> </span> <button ng-Click = "data.a = data.a+1"> increment </button> </diviv> </divits> </divcript. OuterCtrl ($ scope) {$ scope.data = {a: 1};} function innerCtrl () {}Luego descubrí que podía funcionar, y ambos números se incrementaron. Fui el rey de la vinculación bidireccional ... y luego lo tiré a un lado y seguí aprendiendo la siguiente parte del tutorial sin preocuparme por los principios específicos. Este es en realidad mi viaje mental cuando aprendí Angular por primera vez. Me avergonzaba mucho hacer la aplicación e implementarla en el entorno de producción antes de recordar estudiar los principios internos.
El pozo siempre debe llenarse
He dicho tantas tonterías y he pisado el pozo. He entrado en la etapa de llenado de boxes, lo que significa que este pozo puede ser resuelto por los atributos escritos como objetos. De hecho, después de conocer el principio, es fácil de entender. El alcance interno y externo de Angular es heredado por la cadena prototipo basada en JavaScript, y solo se utiliza el método de herencia de la cadena prototipo. Amigos de algunos conceptos básicos de JavaScript deberían poder reaccionar al instante. El valor de tipo de referencia en el objeto prototipo de subclase y el valor de tipo de referencia en el objeto de instancia principal son la misma referencia, y el valor de tipo básico sobrescribirá el valor de tipo básico en el objeto principal. Esta es en realidad la razón por la cual existe la herencia combinada, porque el solo uso de la herencia de la cadena prototipo provocará el problema de apelación, lo cual es un poco de gran alcance.
En resumen, aquí podemos ver el primer ejemplo de la siguiente manera:
function outerCtrl () {this.a = 1;} function innerCtrl () {} var ouruter = new OuterCtrl (); innerCtrl.prototype = outer; var inner = new innerCtrl (); inner.a = inner.a + 1; Aquí, establecemos el objeto prototipo del constructor del controlador interno en un objeto de alcance externo, de modo que el objeto de alcance interno generado hereda la propiedad A en el objeto externo exterior. Esta propiedad es un valor de tipo básico. Al acceder a la propiedad A del objeto interno, dado que el objeto interno en sí no tiene tales atributos, buscará desde su objeto prototipo. Existe dicho atributo en el objeto prototipo externo, por lo que el valor de retorno no es un problema, pero si asignamos el valor a la propiedad A del objeto de alcance interno, surgirá el problema. inner.a = inner.a + 1; Esta declaración en realidad continúa el proceso mencionado anteriormente para encontrar el valor de la propiedad A y luego asigna el valor devuelto a la propiedad A del objeto de alcance interno. Dado que la propiedad A no existe, se crea una propiedad de valor de tipo básico de A, bloqueando la propiedad A en el objeto de alcance externo exterior, y este pozo sale.
Por lo tanto, si reemplazamos el atributo de valor de tipo básico con el atributo de valor de tipo de referencia, el problema se puede resolver, porque los atributos correspondientes de los dos objetos son el mismo valor de tipo de referencia mencionado, y no importa dónde se modifique, se reflejará en todos los objetos que se refieren a él.
Resumir
Lo anterior se trata de las trampas a las que deben prestarse atención en Angular. Espero que el contenido de este artículo sea útil para que todos aprendan sobre el alcance en Angular.