Las directivas son marcadores en el modelo de objeto de documento (DOM). Las directivas se pueden usar con cualquier controlador o etiqueta HTML que le indicará al compilador qué operación o comportamiento exacto se espera. Hay algunas directivas presentes que están predefinidas, pero si un desarrollador quiere, puede crear nuevas directivas (directiva personalizada).
La siguiente tabla enumera las importantes directivas integradas de AngularJS.
| Directivas | Descripción |
|---|---|
| aplicación ng | Inicio de la aplicación AngularJS. |
| ng-init | Se utiliza para inicializar una variable. |
| modelo ng | ng-model se usa para enlazar a los controles HTML |
| controlador ng | Adjunta un controlador a la vista. |
| enlace ng | Vincula el valor con el elemento HTML |
| ng-repetir | Repite la plantilla HTML una vez por cada elemento de la colección especificada. |
| ng-mostrar | Muestra u oculta el elemento HTML asociado |
| ng-solo lectura | Hace que el elemento HTML sea de solo lectura |
| ng-deshabilitado | Úselo para deshabilitar o habilitar un botón dinámicamente |
| ng-si | Elimina o recrea el elemento HTML |
| ng-clic | Paso personalizado al hacer clic |
- ng-app:
la directiva ng-app en AngularJS se usa para definir el elemento raíz de una aplicación AngularJS. Esta directiva inicializa automáticamente la aplicación AngularJS al cargar la página. Se puede usar para cargar varios módulos en la aplicación AngularJS.
Ejemplo: este ejemplo usa la directiva ng-app para definir una aplicación AngularJS predeterminada.<html><head><title>AngularJS ng-app Directive</title><script src=</script></head><body style="text-align:center"><h2 style ="color:green">ng-app directive</h2><div ng-app=""ng-init="name='GeeksforGeeks'"><p>{{ name }} is the portalforgeeks.</p></div></body></html>Producción:
- ng-init:
la directiva ng-init se usa para inicializar los datos de una aplicación AngularJS. Define el valor inicial para una aplicación AngularJS y asigna valores a las variables.
La directiva ng-init define valores iniciales y variables para una aplicación AngularJS.
Ejemplo: En este ejemplo, inicializamos una array de strings.<html>angular.min.js"></script><head><title>AngularJS ng-init Directive</title></head><body><h1 style ="color:green">GeeksforGeeks<h2>ng-init directive</h2><div ng-app=""ng-init="sort=['quick sort', 'merge sort','bubble sort']">Sorting techniques:<ul><li>{{ sort[0] }} </li><li>{{ sort[1] }} </li><li>{{ sort[2] }} </li></ul></div></body></html>Producción:
- ng-model:
ngModel es una directiva que vincula input, select y textarea, y almacena el valor de usuario requerido en una variable y podemos usar esa variable siempre que necesitemos ese valor.
También se utiliza durante las validaciones en un formulario.
Ejemplo:<!DOCTYPE html><html><script src=</script><style>.column {float: left;text-align: left;width: 49%;}.row {content:"";display: table;}</style><body ng-app="myApp"ng-controller="myController"><h4>Input Box-</h4><div class="row"><div class="column">Name-<input type="text"ng-model="name"><pre> {{ name }} </pre> Checkbox-<input type="checkbox"ng-model="check"><pre> {{ check }} </pre> Radiobox-<input type="radio"ng-model="choice"><pre> {{ choice }} </pre> Number-<input type="number"ng-model="num"><pre> {{ num }} </pre> Email-<input type="email"ng-model="mail"><pre> {{ mail }} </pre> Url-<input type="url"ng-model="url"><pre> {{ url }} </pre></div><div class="column">Date:<input type="date"ng-model="date1"(change)="log(date1)"><pre> Todays date:{{ date1+1 }}</pre> Datetime-local-<input type="datetime-local"ng-model="date2"><pre> {{ date2+1 }} </pre> Time-<input type="time"ng-model="time1"><pre> {{ time1+1 }} </pre> Month-<input type="month"ng-model="mon"><pre> {{ mon+1 }} </pre> Week-<input type="week"ng-model="we"><pre> {{ we+1 }} </pre></div></div></body><script>varapp = angular.module('myApp', []);app.controller('myController',function($scope) {$scope.name ="Hello Geeks!";$scope.check ="";$scope.rad ="";$scope.num ="";$scope.mail ="";$scope.url ="";$scope.date1 ="";$scope.date2 ="";$scope.time1 ="";$scope.mon ="";$scope.we ="";$scope.choice ="";$scope.c =function() {$scope.choice =true;};});</script></html>Producción:
- ng-controller:
la directiva ng-controller en AngularJS se usa para agregar un controlador a la aplicación. Se puede usar para agregar métodos, funciones y variables que se pueden llamar en algún evento como hacer clic, etc. para realizar cierta acción.
Ejemplo:<!DOCTYPE html><html><head><title>ng-controller Directive</title><script src=</script></head><body ng-app="app"style="text-align:center"><h1 style="color:green">GeeksforGeeks</h1><h2>ng-controller Directive</h2><br><div ng-controller="geek">Name: <input class="form-control"type="text"ng-model="name"><br><br>You entered: <b><span>{{name}}</span></b></div><script>varapp = angular.module('app', []);app.controller('geek',function($scope) {$scope.name ="geeksforgeeks";});</script></body></html>Producción:
- ng-bind:
la directiva ng-bind en AngularJS se usa para vincular/reemplazar el contenido de texto de cualquier elemento HTML en particular con el valor que se ingresa en la expresión dada. El valor del contenido HTML especificado se actualiza cada vez que el valor de la expresión cambia endirectiva ng-bind .<!DOCTYPE html><html><head><title>ng-checked Directive</title><script src=</script></head><body ng-app="gfg"style="text-align:center"><h1 style="color:green">GeeksforGeeks</h1><h2>ng-bind Directive</h2><div ng-controller="app">num1: <input type="number"ng-model="num1"ng-change="product()"/><br><br>num2: <input type="number"ng-model="num2"ng-change="product()"/><br><br><b>Product:</b> <span ng-bind="result"></span></div><script>varapp = angular.module("gfg", []);app.controller('app', ['$scope',function($app) {$app.num1 = 1;$app.num2 = 1;$app.product =function() {$app.result = ($app.num1 * $app.num2);}}]);</script></body></html>
- ng-repeat:
la directiva ng-repeat de Angular-JS es una herramienta útil para repetir un conjunto de código HTML varias veces o una vez por elemento en una colección de elementos. ng-repeat se usa principalmente en arrays y objetos.
ng-repeat es similar a un bucle que tenemos en C, C++ u otros lenguajes, pero técnicamente instancia una plantilla (normalmente un conjunto de estructuras HTML) para cada elemento de una colección a la que accedemos. Angular mantiene una variable $index como clave para el elemento al que se accede actualmente y el usuario también puede acceder a esta variable.Ejemplo:
- Cree un archivo app.js para la aplicación.
varapp = angular.module('myApp',[]);app.controller('MainCtrl',function($scope){$scope.names = ['Adam','Steve','George','James','Armin'];console.log($scope.names);});Línea 1 : creó un módulo de aplicación llamado «myApp» sin dependencias.
Línea 3- Controlador principal de nuestra aplicación.
Línea 4- Array de strings «nombres». - Crear página index.html
<!DOCTYPE html><html ng-app="myApp"><head><title>Angular ng-repeat</title><script> type="text/javascript"src="jquery-3.2.1.min.js"></script><script> type="text/javascript"src="angular.js"></script><script> type="text/javascript"src="app.js"></script></head><body ng-controller="MainCtrl"><h2>Here is the name list</h2><ul><li ng-repeat="name in names">{{name}}</li></ul></body></html>Línea 5 : incluya todas las dependencias como jquery, angular-js y el archivo app.js.
Línea 12 : use la directiva ng-repeat para obtener un nombre de la array de nombres a la vez y mostrarlo.
Producción:
- Cree un archivo app.js para la aplicación.
- ng-show:
la directiva ng-show en AngluarJS se usa para mostrar u ocultar el elemento HTML especificado. Si la expresión dada en el atributo ng-show es verdadera, el elemento HTML se mostrará; de lo contrario, ocultará el elemento HTML. Es compatible con todos los elementos HTML.
Ejemplo 1: este ejemplo utiliza la directiva ng-show para mostrar el elemento HTML después de marcar la casilla de verificación.<!DOCTYPE html><html><head><title>ng-show Directive</title><script src=</script></head><body><div ng-app="app"ng-controller="geek"><h1 style="color:green">GeeksforGeeks</h1><h2>ng-show Directive</h2><input id="chshow"type="checkbox"ng-model="show"/><labelfor="chshow">Show Paragraph</label><p ng-show="show"style="background: green; color: white;font-size: 14px; width:35%; padding: 10px;">Showthisparagraph using ng-show</p></div><script>varmyapp = angular.module("app", []);myapp.controller("geek",function($scope) {$scope.show =false;});</script></body></html>Salida:
Antes de marcar la casilla de verificación:
Después de marcar la casilla de verificación:
- ng-readonly:
la directiva ng-readonly en AngularJS se usa para especificar el atributo de solo lectura de un elemento HTML. El elemento HTML será de solo lectura si la expresión dentro de la directiva ng-readonly devuelve verdadero.
Ejemplo: este ejemplo utiliza la directiva ng-readonly para habilitar la propiedad de solo lectura.<!DOCTYPE html><html><head><title>ng-readonly Directive</title><script src=</script></head><body ng-app style="text-align:center"><h1 style="color:green">GeeksforGeeks</h1><h2>ng-readonly Directive</h2><div><label>Check to make month readonly: <input type="checkbox"ng-model="open"></label><br><br>Input Month:<input ng-readonly="open"type="month"ng-model="month"></div></body></html>Salida:
Antes de marcar la casilla de verificación:
Después de marcar la casilla de verificación:
- ng-disabled:
la directiva ng-disabled en AngularJS se usa para habilitar o deshabilitar elementos HTML. Si la expresión dentro del atributo ng-disabled devuelve verdadero, el campo del formulario se deshabilitará o viceversa. Por lo general, se aplica en el campo de formulario (entrada, selección, botón, etc.).
Ejemplo 1: este ejemplo usa la directiva ng-disabled para deshabilitar el botón.<!DOCTYPE html><html><head><title>ng-disabled Directive</title><script src=</script></head><body ng-app="app"style="text-align:center"><h1 style="color:green">GeeksforGeeks</h1><h2>ng-disabled Directive</h2><div ng-controller="app"ng-init="disable=false"><button ng-click="geek(disable)"ng-disabled="disable">Click to Disable</button><button ng-click="geek(disable)"ng-show="disable">Click to Enable</button></div><script>varapp = angular.module("app", []);app.controller('app', ['$scope',function($app) {$app.geek =function(disable) {$app.disable = !disable;}}]);</script></body></html>Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
- ng-if:
la directiva ng-if en AngularJS se usa para eliminar o recrear una parte del elemento HTML en función de una expresión. El ng-if es diferente de ng-hide porque elimina completamente el elemento en el DOM en lugar de simplemente ocultar la visualización del elemento. Si la expresión que contiene es falsa, el elemento se elimina y, si es verdadera, el elemento se agrega al DOM.
Ejemplo: este ejemplo cambia el contenido después de hacer clic en el botón.<!DOCTYPE html><html><head><title>ng-hide Directive</title><script src=</script></head><body ng-app="geek"style="text-align:center"><h1 style="color:green">GeeksforGeeks</h1><h2>ng-ifDirective</h2><div ng-controller="app as vm"><div ng-if="!vm.IsShow"><input type="button"class="btn btn-primary"ng-click="vm.IsShow=!vm.IsShow"value="Sign in"><p>Click to Signin</p></div><div ng-if="vm.IsShow"><button class="btn btn-primary"ng-click="vm.IsShow=!vm.IsShow">Sign out</button><p>GeeksforGeeks is the computerscience portalforgeeks.</p></div></div><script>varapp = angular.module("geek", []);app.controller('app', ['$scope',function($scope) {varvm =this;}]);</script></body></html>Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
- ng-click:
la directiva ng-click en AngluarJS se usa para aplicar un comportamiento personalizado cuando se hace clic en un elemento. Se puede usar para mostrar/ocultar algún elemento o puede mostrar una alerta emergente cuando se hace clic en el botón.
Ejemplo: este ejemplo utiliza la directiva ng-click para mostrar un mensaje de alerta después de hacer clic en el elemento.<!DOCTYPE html><html><head><title>ng-click Directive</title><script src=</script></head><body ng-app="geek"style="text-align:center"><h1 style="color:green">GeeksforGeeks</h1><h2>ng-click Directive</h2><div ng-controller="app"><button><a href=""ng-click="alert()">Click Here</a></button></div><script>varapp = angular.module("geek", []);app.controller('app', ['$scope',function($app) {$app.alert =function() {alert("This is an example of ng-click");}}]);</script></body></html>Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por janice_shah y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA