Directiva, lo entiendo como una forma para que los angulares manipulen elementos HTML.
Dado que el primer paso en el aprendizaje de AngularJS es escribir la instrucción incorporada NG-APP para indicar que el nodo es el nodo raíz de la aplicación, las instrucciones ya son familiares.
Este registro simplemente registra algunas instrucciones incorporadas, primero usa y luego habla sobre algunas cosas interesantes.
Comandos incorporados
Todas las directivas incorporadas tienen prefijos NG, y no se recomienda utilizar este prefijo para directivas personalizadas para evitar conflictos.
Comience con algunas instrucciones incorporadas comunes.
Primero, enumere algunas instrucciones incorporadas clave y hable brevemente sobre temas de alcance.
modelo
Esta explicación no parece ser correcta al unir el control de formulario a las propiedades del alcance actual.
Pero no se preocupe por ser masticable, es fácil de entender cuando se usa, por ejemplo:
La copia del código es la siguiente:
<input type = "text" ng-model = "somemodel.someproperty" /> <br>
{{somemodel.someproperty}}
inyente
Esta directiva se llama alcance interno inicializado.
Esta instrucción generalmente aparece en aplicaciones más pequeñas, como dar una demostración o algo ...
La copia del código es la siguiente:
<div ng-init = "Job = 'Fighter'">
Soy a/an {{trabajo}}
</div>
Además de Ng-Init, tenemos más y mejores opciones.
APP NG
Cada vez que usa AngularJS, este comando es inseparable de él. Por cierto, se incluye $ Rootscope.
Declara que el elemento NG-APP se convierte en el punto de partida de $ Rootscope, que es la raíz de la cadena de alcance, que generalmente se declara en <html> que comprende.
Es decir, el alcance puede acceder al alcance debajo de la raíz.
Sin embargo, no se recomienda usar en exceso $ Rootscope para evitar variables globales que vuelan por todo el cielo, lo que hace que la eficiencia sea pobre y difícil de manejar.
Aquí hay un ejemplo:
La copia del código es la siguiente:
<html ng-app = "myApp">
<Body>
{{SomeProperty}}
</body>
<script>
var myApp = angular.module ('myApp', [])
.run (function ($ rootscope) {
$ rootscope.someproperty = 'hola computadora';
});
</script>
</html>
ng-controlador
Utilizamos esta instrucción para instalar el controlador en un elemento DOM.
Un controlador? De hecho, es bueno entender esto literalmente, entonces, ¿por qué necesitamos un controlador?
Recuerde que cuando AngularJS 1.2.x, también puede definir controladores como este ...
La copia del código es la siguiente:
función ohmycontroller ($ alcope) {
// ...
}
Este método está prohibido en AngularJS 1.3.x porque este método hará que los controladores vuelen por todo el cielo, y no se puede distinguir entre los niveles y todo se colgó en $ Rootscope ...
El controlador NG debe tener una expresión como parámetro, y además, los métodos y propiedades del alcance de $ anterior se heredan a través de $ alcance, y $ Rootscope también se incluye.
El siguiente es solo un ejemplo simple, el antepasado no puede acceder al alcance del niño.
La copia del código es la siguiente:
<div ng-confontroller = "AncestorController">
{{Ancestorname}}
{{nombre de niño}}
<div ng-confontroller = "ChildController">
{{Ancestorname}}
{{nombre de niño}}
</div>
</div>
<script>
var myApp = angular.module ('myApp', [])
.Controller ('ChildController', function ($ scope) {
$ Scope.childName = 'Child';
})
.Controller ('AncestorController', function ($ scope) {
$ scope.ancestorname = 'antepasado';
});
</script>
El problema del alcance es mucho más que eso. Veamos a un lado por ahora y continuemos mirando otras instrucciones incorporadas.
forma de ng
Al principio no entendía por qué había un comando de formulario, y la etiqueta <form> se sentía lo suficiente.
Tomando la verificación de formulario como ejemplo, hay un código en el artículo anterior:
La copia del código es la siguiente:
<input type = "enviar" ng-disable = "mainform. $ invalid" />
Es decir, cuando el estado del formulario es $ inválido, el botón Enviar está deshabilitado.
Si la escena es un poco más complicada, por ejemplo, hay múltiples formas infantiles en forma de padre, y la forma principal se puede enviar cuando 3 de la forma del niño pasa la verificación.
Sin embargo, <form> no se puede anidar.
Teniendo en cuenta este escenario, utilizamos la Directiva NG-Form para resolver este problema.
Por ejemplo:
La copia del código es la siguiente:
<form de nombre = "mainform" novalidate>
<div ng-form = "form1">
Nombre: <input type = "text" ng-required = "true" ng-model = "name"/> <br>
Número de identificación: <input type = "número" ng-minLength = "15" ng-maxLength = "18" ng-required = "true" ng-model = "idnum"/>
</div>
<br>
<div ng-form = "form2">
Nombre Guardian: <input type = "text" ng-required = "true" ng-model = "gname"/> <br>
Número de identificación de Guardian: <input type = "número" ng-minLength = "15" ng-maxLength = "18" ng-required = "true" ng-model = "gidnum"/>
</div>
<botón ng-disable = "form1. $ invalid && form2. $ invalid"> Enviar todos </boton>
</form>
discapacitado
Para atributos como este que entran en vigencia mientras parezcan, podemos hacerlo efectivo en AngularJS devolviendo el valor verdadero/falso por el valor de retorno de expresión.
Desactive los campos de entrada de formulario.
La copia del código es la siguiente:
<TextAREA ng-disable = "1+1 == 2"> 1+1 =? </textarea>
ng-readonly
Establezca el campo de entrada de formulario en solo lectura devolviendo el valor verdadero/falso por la expresión.
Haz un ejemplo, y se vuelve de solo lectura después de 3 segundos.
La copia del código es la siguiente:
<input type = "text" ng-readonly = "stoptheworld" value = "detener el mundo después de 3s"/>
.run (function ($ rootscope, $ timeOut) {
$ rootscope.stoptheworld = false;
$ timeOut (function () {
$ rootscope.stoptheworld = true;
}, 3000)
})
verificado
Esto es para <input type = "Checkbox" />, como ...
La copia del código es la siguiente:
<input type = "checkbox" ng-checked = "someProperty" ng-init = "someProperty = true" ng-model = "someProperty">
ng seleccionado
Para usar con <pection> en <select>, ejemplo:
La copia del código es la siguiente:
<Tabel>
<input type = "checkbox" ng-model = "isfullStack">
Soy ingeniero de pila completa
</seleting>
<select>
<pection> front-end </ppection>
<pection> back-end </ppection>
<opción ng-selected = "isfullStack"> Stack completo !!! </opcion>
</select>
ng-show/ng-hide
Mostrar/ocultar elementos HTML de acuerdo con la expresión, tenga en cuenta que está oculto, no se elimina del DOM, por ejemplo:
La copia del código es la siguiente:
<div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
No puedes verme.
</div>
cambio
No es el ONXXX de HTML o algo así, sino ng-xxx.
Usar en combinación con Ng-Model, tomando Ng-Change como ejemplo:
La copia del código es la siguiente:
<input type = "text" ng-model = "calc.arg" ng-change = "calc.result = calc.arg*2" />
<code> {{Calc.Result}} </code>
O, por ejemplo, ng-options
{{}}
De hecho, esta también es una directiva. Tal vez se siente similar a NG-Bind, pero se puede ver cuando la página se hace un poco más lenta.
Además, el rendimiento de {{}} es mucho menor que Ng unión, pero es muy conveniente de usar.
unión a ng
El comportamiento de Ng-Bind es similar a {{}}, excepto que podemos usar esta instrucción para evitar FoUc (flash de contenido no perseguido), es decir, parpadeo causado por el no servir.
ng-cloak
Ng-Cloak también puede resolver Fouc para nosotros. Ng-Cloak oculta elementos internos hasta que la ruta llame a la página correspondiente.
NG-IF
Si la expresión en NG-IF es falsa, el elemento correspondiente se eliminará del DOM en lugar de estar oculto, pero al revisar el elemento, puede ver que la expresión se convierte en un comentario.
Si la fase está oculta, puede usar Ng Hide.
La copia del código es la siguiente:
<div ng-if = "1+1 === 3">
Este elemento no se puede revisar
</div>
<div ng-hide = "1+1 == 2">
Se puede revisar
</div>
interruptor
No importa si lo usas solo, aquí hay ejemplos:
La copia del código es la siguiente:
<div ng-switch on = "1+1">
<P ng-switch-default> 0 </p>
<p ng-switch-when = "1"> 1 </p>
<p ng-switch-when = "2"> 2 </p>
<p ng-switch-when = "3"> 3 </p>
</div>
ng-reput
No entiendo que no se llame iterate. En resumen, es atravesar la colección y generar instancias de plantilla para cada elemento. Algunos atributos especiales se pueden usar en el alcance de cada instancia, como sigue:
La copia del código es la siguiente:
$ índice
$ primero
$ Último
$ Middle
Incluso
extraño
Sin tener que explicarlo específicamente, es fácil ver para qué son. Aquí hay un ejemplo:
La copia del código es la siguiente:
<ul>
<li ng-repeat = "char en
[{'alfabeto': 'k'},
{'alfabeto': 'a'},
{'Alphabet': 'V'},
{'alfabeto': 'l'},
{'alfabeto': 'e'},
{'Alphabet': 'Z'}] "ng-show =" $ incluso "> {{char.alphabet}} </li>
</ul>
ng-href
Al principio hice un modelo NG en un campo de texto y luego lo escribí en href como este.
De hecho, no hay diferencia entre href y ng-href, por lo que podemos probar esto:
La copia del código es la siguiente:
<ul ng-init = "myhref = ''">
<li> <a ng-href = "{{myhref}}"> {{linkText}} </a> </li>
<li> <a href = "{{myhref}}"> haga clic, pero no necesariamente la dirección correcta </a> </li>
</ul>
.run (function ($ rootscope, $ timeOut) {
$ rootscope.linkText = 'No cargado todavía, no puede hacer clic';
$ timeOut (function () {
$ rootscope.linkText = 'por favor haga clic' '
$ rootscope.myhref = 'http://google.com';
}, 2000);
})
ng-src
Lo mismo es cierto, es decir, el recurso no debe cargarse antes de que la expresión surte efecto.
Ejemplo (PD: ¡La imagen es buena!):
La copia del código es la siguiente:
<img ng-src = "{{imgsrc}}"/>
.run (function ($ rootscope, $ timeOut) {
$ timeOut (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})
de clase ng
Cambiar dinámicamente los estilos de clase con objetos en el alcance, por ejemplo:
La copia del código es la siguiente:
<estilo>
.Red {Color de fondo: rojo;}
.Blue {Color de fondo: azul;}
</style>
<div ng-confontroller = "curtimeController">
<botón ng-click = "getCurrentSecond ()"> ¡Obtenga tiempo! </boton>
<p ng-class = "{rojo: x%2 == 0, azul: x%2! = 0}"> el número es: {{x}} </p>
</div>
.Controller ('CurtimeController', function ($ scope) {
$ scope.getCurrentSecond = function () {
$ scope.x = new Date (). GetSeconds ();
};
})
Lo anterior es todo el contenido descrito en este artículo, espero que les guste.