Función de enlace de directiva en AngularJS
Presentaremos directivas y funciones de enlace de directivas en AngularJS y veremos ejemplos para comprenderlas.
Enlace Directivo en Angular
Las Directivas son los marcadores de elementos DOM que le dicen a AngularJS que extienda el HTML a los elementos DOM y sus hijos.
En AngularJS, la mayoría de las directivas comienzan con ng-, donde ng significa Angular. Hay muchas directivas integradas en AngularJS y también podemos crear directivas personalizadas para nuestra aplicación.
Algunas directivas integradas que se usan ampliamente son ng-app, ng-init, ng-model, ng-bind, etc.
Vamos a crear una nueva aplicación AngularJS para ver un ejemplo de directivas.
En primer lugar, agregaremos la biblioteca AngularJS usando etiquetas script.
# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Ahora, definiremos la aplicación AngularJS usando ng-app.
# AngularJs
<body ng-app="">
...
</body>
Luego, definiremos un nombre de modelo usando la directiva ng-model y mostraremos el valor del modelo en un div.
# AngularJs
<input type="text" ng-model="name" />
<div class="Identity-name">
Hello {{name}}, Welcome Back!
</div>
Producción:
Vamos a probarlo escribiendo el valor.
Producción:
Función de enlace de directiva en angular
Ahora analicemos la función de enlace de directiva en Angular mediante un ejemplo para comprender cómo crear una directiva personalizada en AngularJS.
Primero, configuraremos nuestra plantilla en index.html, incluida la biblioteca AngularJS, y definiremos la aplicación AngularJS usando ng-app="my-app". Dentro de nuestra aplicación, describiremos el controlador que será operado usando ng-controller="Controller".
Crearemos un div con un enlace de directiva personalizado lenguaje de programación dentro de nuestro controlador.
Nuestro código en index.html se verá como a continuación.
# AngularJs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Directive Link Function Example by Rana Hasnain Khan</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="my-app">
<div ng-controller="Controller">
<div programming-language></div>
</div>
</body>
</html>
Ahora, en script.js dentro de nuestro controlador, definiremos un alcance para un idioma en el que proporcionaremos el nombre y la última versión de ese idioma.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
Usando la función directive link, vincularemos nuestra directiva programming-language y la función. Pasaremos la plantilla con valores del ámbito del lenguaje.
El código final en script.js se verá a continuación.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
.directive('programmingLanguage', function() {
return {
template: 'Name: {{language.name}} <br> Version: {{language.version}}'
};
});
})(window.angular);
Producción:
De esta manera, podemos usar fácilmente directivas integradas y crear nuestras nuevas directivas personalizadas que se pueden usar para pasar valores o plantillas en archivos de plantilla.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn