Direktive Link-Funktion in AngularJS
Wir werden Direktiven und Direktiven-Link-Funktionen in AngularJS einführen und Beispiele durchgehen, um sie zu verstehen.
Direktive Link in Angular
Die Direktiven sind die DOM-Elementmarkierungen, die AngularJS anweisen, den HTML-Code auf DOM-Elemente und ihre untergeordneten Elemente zu erweitern.
In AngularJS beginnen die meisten Direktiven mit ng-, wobei ng für Angular steht. Es gibt viele eingebaute Direktiven in AngularJS, und wir können auch benutzerdefinierte Direktiven für unsere Anwendung erstellen.
Einige weit verbreitete eingebaute Direktiven sind ng-app, ng-init, ng-model, ng-bind usw.
Lassen Sie uns eine neue AngularJS-Anwendung erstellen, um ein Beispiel für Anweisungen durchzugehen.
Zuerst fügen wir die AngularJS-Bibliothek mit script-Tags hinzu.
# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Jetzt definieren wir die AngularJS-Anwendung mit ng-app.
# AngularJs
<body ng-app="">
...
</body>
Dann definieren wir einen Modellnamen mit der Direktive ng-model und zeigen den Wert des Modells in einem div an.
# AngularJs
<input type="text" ng-model="name" />
<div class="Identity-name">
Hello {{name}}, Welcome Back!
</div>
Ausgabe:
Testen wir es, indem wir den Wert eingeben.
Ausgabe:
Direktive Link-Funktion in Angular
Lassen Sie uns nun die Direktiven-Link-Funktion in Angular besprechen, indem wir ein Beispiel durchgehen, um zu verstehen, wie eine benutzerdefinierte Direktive in AngularJS erstellt wird.
Zuerst legen wir unser Template in index.html inklusive der AngularJS-Bibliothek fest und definieren die AngularJS-Anwendung mit ng-app="my-app". Innerhalb unserer Anwendung beschreiben wir den zu bedienenden Controller mit ng-controller="Controller".
Wir werden ein div mit einem benutzerdefinierten Direktivenlink programming-language in unserem Controller erstellen.
Unser Code in index.html sieht wie folgt aus.
# 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>
Jetzt definieren wir in script.js in unserem Controller einen Bereich für eine Sprache, in der wir den Namen und die neueste Version dieser Sprache angeben.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
Mit der directive link function, verknüpfen wir unsere Direktive programming-language und die Funktion. Wir werden die Vorlage mit Werten aus dem Sprachbereich übergeben.
Der endgültige Code in script.js sieht wie folgt aus.
# 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);
Ausgabe:
Auf diese Weise können wir einfach integrierte Direktiven verwenden und unsere neuen benutzerdefinierten Direktiven erstellen, die zum Übergeben von Werten oder Vorlagen in Vorlagendateien verwendet werden können.
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