Restringir directivas personalizadas en AngularJS

Muhammad Adil 23 mayo 2022

Angular Angular Directive

Restringir directivas personalizadas en AngularJS

Las directivas son un tipo especial de componente AngularJS que se utiliza para ampliar la funcionalidad de un elemento HTML o crear nuevas funciones con un comportamiento enriquecido que no está disponible con HTML puro.

AngularJS incluye directivas preconstruidas como ngBind, ngModel y ngClass. El marco Angular usa estas directivas para instruir al navegador sobre nuevas etiquetas HTML.

Las etiquetas y comentarios HTML y las clases y propiedades CSS son ejemplos de directivas.

La directiva de restricción limita el acceso al elemento DOM desde códigos HTML externos al agregarle un atributo.

Este artículo discutirá cómo limitar las directivas personalizadas en AngularJS.

Directiva de AngularJS Restringir `A` vs. `E`

El atributo restringir le dice a Angular cómo crear una nueva directiva que solo tiene una letra. Puede tener cuatro valores: A, C, E, M, o una combinación de esos valores, como EA, ME, etc.

Cada uno es significativo a su manera.

Los valores restringidos y su significado se enumeran a continuación.

E indica que solo se puede utilizar como elemento.
A indica que solo se puede utilizar como atributo.
C solo es válido como atributo de clase.
M solo se aplica a los comentarios.

Supongamos que el nombre de la directiva es hola. Los siguientes son los tipos y su uso.

A = <div hello></div>
C = <div class="hello"></div>
E = <hello data="Demo"></hello>
M = <!--directive:hello -->

Al desarrollar un componente a cargo de la plantilla, utilice un elemento. Este es un escenario común cuando está construyendo un lenguaje específico de dominio para aspectos de su plantilla.

Al agregar una nueva funcionalidad a un elemento existente, use un atributo.

Puede aplicar varias directivas al mismo nodo DOM al aprovechar un atributo en lugar de un elemento.

Esto es especialmente útil para los controles de formulario, donde puede usar propiedades adicionales para resaltar, deshabilitar o agregar etiquetas sin tener que encerrar el componente de muchas etiquetas.

Ejemplo (JavaScript):

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});
app.directive('helloWorld',function(){
    return {
        replace:true,
        restrict: 'E',
        template: '<h2>Hello World</h2>'
    }
});

Ejemplo (HTML):

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta charset="utf-8" />
        <script>document.write('<base href="' + document.location + '" />');</script>
        <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="MainCtrl">
        <hello-world></hello-world>
        <div hello-world></div>
        <div class="hello-world"></div>
    </body>
</html>

Haga clic aquí para ver la demostración en vivo del código.

Autor: Muhammad Adil

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

Directiva de AngularJS Restringir A vs. E

Artículo relacionado - Angular Directive

Directiva de AngularJS Restringir `A` vs. `E`