AngularJS directivas
La nueva propiedad es llamado por AngularJS directivas para extender HTML.
AngularJS instrucciones incorporadas para la aplicación para agregar funcionalidad.
AngularJS le permite personalizar la instrucción.
AngularJS directivas
AngularJS instrucción es una extensión de atributos HTML con el ng- prefijo.
instrucciones ng-app para inicializar una aplicación AngularJS.
comando ng-init para inicializar los datos de la aplicación.
ng-modelo de orden de los valores de los elementos (tales como el valor del campo de entrada) unido a la aplicación.
Las instrucciones completas se pueden encontrar en el contenido del manual de referencia AngularJS .
AngularJS ejemplos
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div>
Trate »
Directiva ng-app dice AngularJS, <div> es la aplicación AngularJS del "propietario".
 | Una página web puede contener múltiples aplicaciones AngularJS de ejecución en distintos elementos. |
|---|
Los datos de unión
En el ejemplo anterior {{NOMBRE}} AngularJS expresión es una expresión de enlace de datos.
AngularJS enlaces de datos, sincronizados con AngularJS AngularJS datos de expresión.
{{FirstName}} por ng-modelo = "Nombre" sincronización.
En el siguiente ejemplo, dos campos de texto se calcula a través de la sincronización de dos instrucciones ng-modelo:
AngularJS ejemplos
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>
Trate »
| Uso ng-init no es muy común. Usted aprenderá a ser una mejor manera de inicializar los datos en el capítulo controlador. |
|---|
Repita los elementos HTML
ng instrucción de repetición repite un elemento HTML:
AngularJS ejemplos
<P> Uso-ng repetir para recorrer la matriz </ p>
<Ul>
<Li ng-repeat = "x en los nombres">
{{X}}
</ Li>
</ Ul>
</ Div>
Trate »
ng instrucción de repetición se utiliza en una gran variedad de objetos:
AngularJS ejemplos
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Trate »
| AngularJS CRUD base de datos de soporte perfecto (aumentar crear, leer leer, actualizar actualizar, eliminar aplicaciones Eliminar). Pensar en ejemplos de objetos en los registros de la base de datos. |
|---|
Directiva ng-app
Directiva ng aplicación define la aplicación AngularJS elemento raíz.
instrucciones ng-app cuando la página se carga automáticamente las aplicaciones arrancan (inicialización automática).
Más adelante aprenderá cómo NG-aplicación por un valor (por ejemplo, ng-app = "mi_módulo") conectado al módulo de código.
ng-comando init
ng-init aplicación AngularJS instrucción define el valor inicial.
En circunstancias normales, no utilice ng-init. Que va a utilizar un controlador o módulo para reemplazarlo.
Más adelante aprenderá más acerca de los controladores y los módulos.
Directiva ng-modelo
ng-modelo de los elementos se unen directiva HTML a los datos de la aplicación.
Directiva ng-modelo también puede:
- Proporcionar la verificación del tipo de datos de aplicación (número, correo electrónico, es necesario).
- Da el estado de los datos de la aplicación (no válido, sucio, tocado, error).
- Proporcionar clases CSS para elementos HTML.
- elementos HTML se unen al formulario HTML.
ng-repetición de instrucciones
ng instrucción de repetición para la recolección (array) de cada artículo será clonar un elemento HTML.
Crear un comando personalizado
AngularJS Además de las instrucciones incorporadas, también puede crear comandos personalizados.
Función.directive puede utilizar para agregar comandos personalizados.
Para llamar a un comando personalizado, es necesario agregar un nombre de comando personalizado en el elemento HTML.
Utilice el método de joroba para nombrar unadirectiva, w3bigDirective, pero cuando hay que usarla -segmentación, w3big directiva:
AngularJS ejemplos
<W3big-directriz> </ w3big -Directiva>
<Script>
var app = angular.module ( "myApp", []);
app.directive ( "w3bigDirective", function () {
volver {
plantilla: "<h1> Instrucción </ h1>!"
};
});
</ Script>
</ Body>
Trate »
Puede llamar a la instrucción de las siguientes maneras:
- nombre del elemento
- propiedad
- El nombre de la clase
- nota
La siguiente a modo de ejemplo puede dar salida al mismo resultado:
Restricciones del empleo
Se puede limitar la instrucción sólo puede ser invocada por un modo particular.
Ejemplos
Mediante la adición derestringir la propiedad y establece el valor sólo "A" , para configurar el comando sólo puede ser llamado por medio de la propiedad:
app.directive ( "w3bigDirective", la función ( ) {
volver {
restrinjan: "A",
plantilla: "<h1> Instrucción </ h1>!"
};
});
Trate »
restringir el valor puede ser el siguiente:
-
Ese utiliza como el nombre del elemento -
Auso como un atributo -
Cse utiliza como el nombre de la clase -
Mcomo un comentario
restringir por defecto es EA , que puede ser invocada por el elemento de mando y nombres de atributo.