Benutzerdefinierte Direktiven in AngularJS einschränken

Muhammad Adil 23 Mai 2022

Angular Angular Directive

Benutzerdefinierte Direktiven in AngularJS einschränken

Direktiven sind eine spezielle Art von AngularJS-Komponente, die verwendet wird, um die Funktionalität eines HTML-Elements zu erweitern oder neue Funktionen mit einem reichhaltigen Verhalten zu erstellen, das mit reinem HTML nicht verfügbar ist.

AngularJS enthält vorgefertigte Direktiven wie ngBind, ngModel und ngClass. Das Angular-Framework verwendet diese Direktiven, um den Browser über neue HTML-Tags zu informieren.

HTML-Tags und -Kommentare sowie CSS-Klassen und -Eigenschaften sind Beispiele für Direktiven.

Die Restriction-Direktive schränkt den Zugriff auf das DOM-Element von externen HTML-Codes ein, indem sie ihm ein Attribut hinzufügt.

In diesem Artikel wird erläutert, wie benutzerdefinierte Direktiven in AngularJS eingeschränkt werden.

AngularJS-Direktive beschränkt `A` vs. `E`

Das Attribut restrict teilt Angular mit, wie eine neue Direktive erstellt werden soll, die nur einen Buchstaben lang ist. Es kann vier Werte haben: A, C, E, M oder eine Kombination dieser Werte, wie EA, ME usw.

Jeder ist auf seine Weise bedeutsam.

Die eingeschränkten Werte und ihre Bedeutung sind unten aufgeführt.

E bedeutet, dass es nur als Element verwendet werden kann.
A bedeutet, dass es nur als Attribut verwendet werden kann.
C ist nur als Klassenattribut gültig.
M gilt nur für Kommentare.

Angenommen, der Name der Direktive lautet hello. Im Folgenden sind die Typen und ihre Verwendung aufgeführt.

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

Verwenden Sie bei der Entwicklung einer Komponente, die für die Vorlage verantwortlich ist, ein Element. Dies ist ein häufiges Szenario, wenn Sie eine domänenspezifische Sprache für Aspekte Ihrer Vorlage erstellen.

Wenn Sie einem vorhandenen Element eine neue Funktionalität hinzufügen, verwenden Sie ein Attribut.

Sie können mehrere Direktiven auf denselben DOM-Knoten anwenden, wenn Sie ein Attribut anstelle eines Elements nutzen.

Dies ist besonders nützlich für Formularsteuerelemente, bei denen Sie zusätzliche Eigenschaften verwenden können, um Beschriftungen hervorzuheben, zu deaktivieren oder hinzuzufügen, ohne die Komponente von vielen Tags umschließen zu müssen.

Beispiel (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>'
    }
});

Beispiel (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>

Klicken Sie hier, um die Live-Demonstration des Codes zu überprüfen.

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

AngularJS-Direktive beschränkt A vs. E

Verwandter Artikel - Angular Directive

AngularJS-Direktive beschränkt `A` vs. `E`