Cómo utilizar el rango dentro del rango de ángulo
El alcance es el vínculo entre HTML (vista) y JavaScript (controlador).
Un alcance es un objeto con métodos y propiedades disponibles.
Los ámbitos se pueden aplicar a vistas y controladores.
$rootScope
De forma predeterminada, cada aplicación AngularJs tiene un alcance raíz: $rootScope, que se encuentra en el nivel superior y puede usarse como alcance principal para otros ámbitos.
$Scope
Scope corresponde al modelo del patrón MVC, que es el vínculo entre HTML (vista) y JavaScript (controlador). Se puede aplicar tanto a vistas como a controladores. .
Un alcance es el contexto en el que se ejecuta una expresión. Un alcance también es un objeto con métodos y propiedades disponibles.
Primero, el valor y la asignación de variables
ltp ng-controller = " parent ctrl " gt
ltspan gt{ { number } } lt/spangt; .
ltp ng-controller="childCtrl "
ltspan gt{ { número } } lt/spangt.
ltbutton ng-click = " número = número 1 " gt; aumentar
lt/p gt
lt/p gt; p>Función parentCtrl($alcance){
$ alcance número = 1;
}
Función childCtrl($alcance){
}Efecto:
Se muestran dos unos en la interfaz, pero cuando hacemos clic en el botón, los datos en el rango childCtrl cambian, pero los datos en el rango parentCtrl no cambian.
Análisis:
①El alcance childCtrl hereda el alcance parentCtrl (similar a la herencia de cadena de prototipos de JavaScript), por lo que el alcance childCtrl puede acceder al contenido de parentCtrl.
②Después de hacer clic en el botón, el alcance de childCtrl creará una variable numérica de tipo básico. Cuando childCtrl tiene una variable de tipo básico, no se accederá a la cadena de prototipos.
Solución:
① Puede usar $parent para especificar cambios en el alcance principal.
ltp ng-controller = " ctrl principal " gt;
ltspan gt{ { número } } lt/spangt.
ltp ng-controller="childCtrl "
ltspan gt{ { número } } lt/spangt.
ltbutton ng-click = " $ padre . número = número 1 " >Agregar
lt/p gt
lt/p gt; Cuando se utilizan variables de tipo de referencia, tanto el ámbito interno como el externo se refieren al objeto de datos. La modificación de las propiedades del objeto todavía se refiere a la misma variable.
ltp ng-controller = " ctrl principal " gt;
ltspan gt{ { data.number } } lt/spangt.
ltp ng-controller="childCtrl "
ltspan gt{ { data.number } } lt/spangt.
ltbutton ng-click = " datos . número = datos . número 1 " >Agregar
lt/p gt;
lt/p gt;
lt/p gt;
p>
Función parentCtrl($alcance){
$ alcance número = 123 ';
}
Función childCtrl($scope) {
} Instrucciones como ng-if, ng-repeat, ng-switch y ng-include también generarán nuevos alcances .
En segundo lugar, el alcance de la instrucción
. directiva(" miDirectiva ", función () {
Devuelve {
Límite: "AE",
Alcance: {
Nombre : "@minombre",
Edad: ' = ',
Cambio: ' amp 'cambiar mi edad'
},
Reemplazo: verdadero,
Plantilla: " lt'mi directiva' >
"Mi nombre es:
"Mi edad es:
"Cambiar nombre aquí:
" ltbutton ng-click = 'cambiar edad()' gt;Modificar edad
" lt/p>;
}①Alcance: falso
Cuando el alcance se establece en falso, la directiva que creamos comparte el mismo modelo con el alcance principal (en realidad, el mismo alcance) * * *, por lo que si modificamos los datos del modelo en la directiva , se reflejará en el modelo del ámbito principal.
②Alcance: verdadero
Cuando el alcance se establece en verdadero, creamos un nuevo alcance, pero este alcance es heredado. alcance principal; se puede entender que nuestro alcance recién creado es un alcance nuevo, pero durante la inicialización, usamos las propiedades y métodos del alcance principal para completar nuestro nuevo alcance. Es diferente del alcance principal: {}
@Este es el identificador de prefijo de un enlace único. > ltp my-directive my-name = " { { name } } " gt/p gt; palabras, debido a que es un enlace único de datos, los datos deben usarse {{} } para enlazar
=Este es un identificador de prefijo de enlace de datos bidireccional
ltp. my-directive age="age " > lt/p gt; enlace bidireccional de datos Esto se logra mediante el identificador de prefijo =, por lo que no se puede usar {{}}
amp Este es el prefijo. identificador del método de función vinculante
ltp my-directive change-my. -age = "change age()" gt; el nombre del atributo debe ser - para conectar varias palabras.
Lo anterior es lo que compilé para todos. Espero que sea útil para todos en el futuro.
Artículos relacionados:
Cómo usar reaccionar para implementar el control de permisos del menú
Explique en detalle cómo los accesorios pasan parámetros en vue.js
Cómo implementar consultas difusas dinámicas en la entrada