AngularJS
Benutzerdefinierte Richtlinien
Suche…
Einführung
Hier erfahren Sie mehr über die Direktive-Funktion von AngularJS. Nachfolgend finden Sie Informationen zu Richtlinien und grundlegende und erweiterte Anwendungsbeispiele.
Parameter
| Parameter | Einzelheiten |
|---|---|
| Umfang | Eigenschaft, um den Geltungsbereich der Richtlinie festzulegen. Es kann als falsch, wahr oder als isolierter Bereich festgelegt werden: {@, =, <, &}. |
| Geltungsbereich: Fälschung | Richtlinie verwendet den Geltungsbereich der Muttergesellschaft. Kein Bereich für Direktive erstellt. |
| Geltungsbereich: wahr | Die Richtlinie erbt den Elternbereich prototypisch als neuen untergeordneten Bereich. Wenn für dasselbe Element mehrere Anweisungen vorhanden sind, die einen neuen Gültigkeitsbereich anfordern, teilen sie sich einen neuen Gültigkeitsbereich. |
| Umfang: { @ } | Einwegbindung einer Direktive-Bereichseigenschaft an einen DOM-Attributwert. Da der Attributwert an das übergeordnete Element gebunden ist, ändert sich dieser im Direktive-Bereich. |
| Umfang: {=} | Bidirektionale Attributbindung, die das Attribut im übergeordneten Element ändert, wenn sich das Direktive-Attribut ändert und umgekehrt. |
| Umfang: {<} | Einwegbindung einer Bereichsrichtlinie und eines DOM-Attributausdrucks. Der Ausdruck wird im übergeordneten Element ausgewertet. Dadurch wird die Identität des übergeordneten Werts überwacht, sodass Änderungen an einer Objekteigenschaft im übergeordneten Wert nicht in der Direktive angezeigt werden. Änderungen an einer Objekteigenschaft in einer Direktive werden im übergeordneten Objekt angezeigt, da beide auf dasselbe Objekt verweisen |
| Umfang: { & } | Ermöglicht der Direktive, Daten an einen Ausdruck zu übergeben, der im übergeordneten Element ausgewertet werden soll. |
| kompilieren: Funktion | Diese Funktion wird verwendet, um die DOM-Umwandlung in der Direktivenvorlage auszuführen, bevor die Verknüpfungsfunktion ausgeführt wird. Es akzeptiert tElement (die Direktivenvorlage) und tAttr (Liste der in der Direktive deklarierten Attribute). Es hat keinen Zugriff auf den Geltungsbereich. Es kann eine Funktion zurück , die als registriert wird post-link - Funktion oder es kann ein Objekt mit Rück pre und post - Eigenschaften mit wird als registriert seine pre-link und post-link - Funktionen. |
| Link: Funktion / Objekt | Die Link-Eigenschaft kann als Funktion oder Objekt konfiguriert werden. Es kann die folgenden Argumente empfangen: Bereich (Direktive-Bereich), iElement (DOM-Element, auf das die Direktive angewendet wird), iAttrs (Sammlung von DOM-Elementattributen), Controller (Array von Controllern, die von der Direktive benötigt werden), transcludeFn. Es wird hauptsächlich verwendet, um DOM-Listener einzurichten, Modelleigenschaften auf Änderungen zu prüfen und das DOM zu aktualisieren. Es wird ausgeführt, nachdem die Vorlage geklont wurde. Sie wird unabhängig konfiguriert, wenn keine Kompilierfunktion vorhanden ist. |
| Pre-Link-Funktion | Verknüpfungsfunktion, die vor untergeordneten Verknüpfungsfunktionen ausgeführt wird. Standardmäßig werden untergeordnete Direktive-Verknüpfungsfunktionen vor übergeordneten Direktive-Verknüpfungsfunktionen ausgeführt. Mit der Pre-Link-Funktion kann der übergeordnete Link zuerst verknüpft werden. Ein Anwendungsfall ist, wenn das Kind Daten vom Elternteil benötigt. |
| Post-Link-Funktion | Verknüpfungsfunktion, bei der Führungskräfte nach untergeordneten Elementen mit übergeordneten Elementen verknüpft werden. Sie wird häufig für das Anhängen von Ereignishandlern und für den Zugriff auf untergeordnete Direktiven verwendet. Die für die untergeordnete Direktive erforderlichen Daten sollten hier jedoch nicht festgelegt werden, da die untergeordnete Direktive bereits verknüpft wurde. |
| einschränken: string | Definiert, wie die Direktive aus dem DOM aufgerufen wird. Mögliche Werte (Angenommen, unser Direktionsname ist demoDirective ): E - Elementname ( <demo-directive></demo-directive> ), A - Attribut ( <div demo-directive></div> ), C - Übereinstimmende Klasse ( <div class="demo-directive"></div> ), M - Durch Kommentar ( <!-- directive: demo-directive --> ). Die restrict kann auch mehrere Optionen unterstützen, z. B. - restrict: "AC" beschränkt die Anweisung auf Attribut ODER Klasse . Wenn nicht angegeben, ist der Standardwert "EA" (Element oder Attribut). |
| erfordern: 'demoDirective' | Suchen Sie den Controller von demoDirective auf dem aktuellen Element und fügen Sie den Controller als viertes Argument in die Verknüpfungsfunktion ein. Fehler melden, falls nicht gefunden. |
| erfordern: '? demoDirective' | Versuchen Sie, den Controller der demoDirective zu finden, oder übergeben Sie null an den Link fn, falls dieser nicht gefunden wird. |
| erfordern: '^ demoDirective' | Suchen Sie den Controller von demoDirective, indem Sie das Element und seine übergeordneten Elemente durchsuchen. Fehler melden, falls nicht gefunden. |
| erfordern: '^^ demoDirective' | Suchen Sie den Controller von demoDirective, indem Sie die übergeordneten Elemente des Elements durchsuchen. Fehler melden, falls nicht gefunden. |
| erfordern: '? ^ demoDirective' | Versuchen Sie, den Controller der demoDirective zu finden, indem Sie das Element und seine übergeordneten Elemente durchsuchen oder den Link fn mit Null belegen, wenn er nicht gefunden wird. |
| erfordern: '? ^^ demoDirective' | Versuchen Sie, den Controller von demoDirective zu finden, indem Sie die übergeordneten Elemente des Elements durchsuchen, oder übergeben Sie null an den Link fn, falls dieser nicht gefunden wird. |
Benutzerdefinierte Anweisungen erstellen und verwenden
Direktiven sind eine der leistungsstärksten Funktionen von anglejs. Benutzerdefinierte winkls-Direktiven werden verwendet, um die Funktionalität von HTML zu erweitern, indem neue HTML-Elemente oder benutzerdefinierte Attribute erstellt werden, um einem HTML-Tag ein bestimmtes Verhalten zu verleihen.
Direktive.js
// Create the App module if you haven't created it yet
var demoApp= angular.module("demoApp", []);
// If you already have the app module created, comment the above line and create a reference of the app module
var demoApp = angular.module("demoApp");
// Create a directive using the below syntax
// Directives are used to extend the capabilities of html element
// You can either create it as an Element/Attribute/class
// We are creating a directive named demoDirective. Notice it is in CamelCase when we are defining the directive just like ngModel
// This directive will be activated as soon as any this element is encountered in html
demoApp.directive('demoDirective', function () {
// This returns a directive definition object
// A directive definition object is a simple JavaScript object used for configuring the directive’s behaviour,template..etc
return {
// restrict: 'AE', signifies that directive is Element/Attribute directive,
// "E" is for element, "A" is for attribute, "C" is for class, and "M" is for comment.
// Attributes are going to be the main ones as far as adding behaviors that get used the most.
// If you don't specify the restrict property it will default to "A"
restrict :'AE',
// The values of scope property decides how the actual scope is created and used inside a directive. These values can be either “false”, “true” or “{}”. This creates an isolate scope for the directive.
// '@' binding is for passing strings. These strings support {{}} expressions for interpolated values.
// '=' binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope.
// '&' binding is for passing a method into your directive's scope so that it can be called within your directive.
// The method is pre-bound to the directive's parent scope, and supports arguments.
scope: {
name: "@", // Always use small casing here even if it's a mix of 2-3 words
},
// template replaces the complete element with its text.
template: "<div>Hello {{name}}!</div>",
// compile is called during application initialization. AngularJS calls it once when html page is loaded.
compile: function(element, attributes) {
element.css("border", "1px solid #cccccc");
// linkFunction is linked with each element with scope to get the element specific data.
var linkFunction = function($scope, element, attributes) {
element.html("Name: <b>"+$scope.name +"</b>");
element.css("background-color", "#ff00ff");
};
return linkFunction;
}
};
});
Diese Direktive kann dann in App verwendet werden als:
<html>
<head>
<title>Angular JS Directives</title>
</head>
<body>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="directive.js"></script>
<div ng-app = "demoApp">
<!-- Notice we are using Spinal Casing here -->
<demo-directive name="World"></demo-directive>
</div>
</body>
</html>
Richtliniendefinitionsobjektvorlage
demoApp.directive('demoDirective', function () {
var directiveDefinitionObject = {
multiElement:
priority:
terminal:
scope: {},
bindToController: {},
controller:
controllerAs:
require:
restrict:
templateNamespace:
template:
templateUrl:
transclude:
compile:
link: function(){}
};
return directiveDefinitionObject;
});
-
multiElement- auf true gesetzt, und alle DOM-Knoten zwischen Anfang und Ende des Direktivenamens werden gesammelt und als Direktiveelemente zusammengefasst -
priority- ermöglicht die Angabe der Reihenfolge zum Anwenden von Anweisungen, wenn mehrere Anweisungen für ein einzelnes DOM-Element definiert sind. Richtlinien mit höheren Nummern werden zuerst erstellt. -
terminal- auf true gesetzt, und die aktuelle Priorität ist die letzte auszuführende Direktive -
scope- legt den Geltungsbereich der Richtlinie fest -
bind to controller- bindet die Scope-Eigenschaften direkt an den Direktive Controller -
controllerController-Konstruktorfunktion -
require- erfordert eine andere Direktive und fügt ihren Controller als viertes Argument der Verknüpfungsfunktion hinzu -
controllerAs- Namensreferenz auf den Controller im Direktive-Bereich, damit der Controller aus der Direktive-Vorlage referenziert werden kann. -
restrict- beschränkt die Anweisung auf Element, Attribut, Klasse oder Kommentar -
templateNameSpace- Legt den von der VorlagetemplateNameSpaceverwendeten Dokumenttyp fest: html, svg oder math. html ist die Standardeinstellung -
template- html-Markup, das standardmäßig den Inhalt des Direktive-Elements ersetzt oder den Inhalt des Direktive-Elements umschließt, wenn transclude den Wert true hat -
templateUrl- URL, die asynchron für die Vorlage bereitgestellt wird -
transclude- Extrahieren Sie den Inhalt des Elements, in dem die Direktive angezeigt wird, und stellen Sie es der Direktive zur Verfügung. Die Inhalte werden kompiliert und der Richtlinie als Transclusionsfunktion zur Verfügung gestellt. -
compile- Funktion zum Umwandeln des Vorlagen-DOMs -
link- Wird nur verwendet, wenn die Compile-Eigenschaft nicht definiert ist. Die Link-Funktion ist für die Registrierung der DOM-Listener sowie für die Aktualisierung des DOM verantwortlich. Sie wird ausgeführt, nachdem die Vorlage geklont wurde.
Beispiel für eine Grundrichtlinie
Superman-Direktive.js
angular.module('myApp', [])
.directive('superman', function() {
return {
// restricts how the directive can be used
restrict: 'E',
templateUrl: 'superman-template.html',
controller: function() {
this.message = "I'm superman!"
},
controllerAs: 'supermanCtrl',
// Executed after Angular's initialization. Use commonly
// for adding event handlers and DOM manipulation
link: function(scope, element, attributes) {
element.on('click', function() {
alert('I am superman!')
});
}
}
});
superman-template.html
<h2>{{supermanCtrl.message}}</h2>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="superman-directive.js"><script/>
</head>
<body>
<div ng-app="myApp">
<superman></superman>
</div>
</body>
</html>
Weitere Informationen zu den restrict und link Direktive finden Sie in der offiziellen Dokumentation von AngularJS zu Direktiven
So erstellen Sie eine wiederverwendbare Komponente mithilfe der Direktive
AngularJS-Direktiven steuern das Rendern von HTML in einer AngularJS-Anwendung. Sie können ein HTML-Element, ein Attribut, eine Klasse oder ein Kommentar sein. Direktiven werden verwendet, um das DOM zu bearbeiten, HTML-Elementen neues Verhalten zu verleihen, Daten zu binden und vieles mehr. Beispiele für Anweisungen, die von angle bereitgestellt werden, sind ng-model, ng-hide, ng-if.
Ebenso kann man seine eigene benutzerdefinierte Direktive erstellen und diese wieder herstellen. Zum Erstellen von benutzerdefinierten Anweisungen Referenz . Der Sinn beim Erstellen wiederverwendbarer Direktiven besteht darin, eine Reihe von Direktiven / Komponenten zu erstellen, die von Ihnen geschrieben werden, so wie es von anglejs bei der Verwendung von angle.js bereitgestellt wird. Diese wiederverwendbaren Anweisungen können besonders hilfreich sein, wenn Sie über eine Suite von Anwendungen / Anwendungen verfügen, für die ein konsistentes Verhalten und Erscheinungsbild erforderlich ist. Ein Beispiel für eine solche wiederverwendbare Komponente kann eine einfache Symbolleiste sein, die Sie möglicherweise in Ihrer Anwendung oder in anderen Anwendungen verwenden möchten. Sie soll sich jedoch gleich verhalten oder gleich aussehen.
Erstellen Sie zunächst einen Ordner mit dem Namen resuableComponents in Ihrem App-Ordner, und erstellen Sie reusableModuleApp.js
reusableModuleApp.js:
(function(){
var reusableModuleApp = angular.module('resuableModuleApp', ['ngSanitize']);
//Remember whatever dependencies you have in here should be injected in the app module where it is intended to be used or it's scripts should be included in your main app
//We will be injecting ng-sanitize
resubaleModuleApp.directive('toolbar', toolbar)
toolbar.$inject=['$sce'];
function toolbar($sce){
return{
restrict :'AE',
//Defining below isolate scope actually provides window for the directive to take data from app that will be using this.
scope : {
value1: '=',
value2: '=',
},
}
template : '<ul> <li><a ng-click="Add()" href="">{{value1}}</a></li> <li><a ng-click="Edit()" href="#">{{value2}}</a></li> </ul> ',
link : function(scope, element, attrs){
//Handle's Add function
scope.Add = function(){
};
//Handle's Edit function
scope.Edit = function(){
};
}
}
});
mainApp.js:
(function(){
var mainApp = angular.module('mainApp', ['reusableModuleApp']); //Inject resuableModuleApp in your application where you want to use toolbar component
mainApp.controller('mainAppController', function($scope){
$scope.value1 = "Add";
$scope.value2 = "Edit";
});
});
index.html:
<!doctype html>
<html ng-app="mainApp">
<head>
<title> Demo Making a reusable component
<head>
<body ng-controller="mainAppController">
<!-- We are providing data to toolbar directive using mainApp'controller -->
<toolbar value1="value1" value2="value2"></toolbar>
<!-- We need to add the dependent js files on both apps here -->
<script src="js/angular.js"></script>
<script src="js/angular-sanitize.js"></script>
<!-- your mainApp.js should be added afterwards --->
<script src="mainApp.js"></script>
<!-- Add your reusable component js files here -->
<script src="resuableComponents/reusableModuleApp.js"></script>
</body>
</html>
Direktive sind standardmäßig wiederverwendbare Komponenten. Wenn Sie Anweisungen in einem separaten Winkelmodul erstellen, ist es tatsächlich exportierbar und für verschiedene Winkel-J-Anwendungen wiederverwendbar. Neue Anweisungen können einfach in reusableModuleApp.js hinzugefügt werden, und reusableModuleApp kann über einen eigenen Controller, eigene Services und ein DDO-Objekt in der Direktive verfügen, um das Verhalten zu definieren.
Grundlegende Direktive mit Vorlage und isoliertem Geltungsbereich
Durch das Erstellen einer benutzerdefinierten Direktive mit isoliertem Bereich wird der Gültigkeitsbereich innerhalb der Direktive von dem externen Gültigkeitsbereich getrennt, um zu verhindern, dass unsere Direktive die Daten im übergeordneten Bereich versehentlich ändert und verhindert, dass private Daten aus dem übergeordneten Bereich gelesen werden.
Um einen isolierten Bereich zu erstellen und immer noch unsere eigene Richtlinie ermöglichen , mit dem Außenumfang zu kommunizieren, können wir die Verwendung scope Option , die beschreibt , wie die Bindungen der Richtlinien inneren Umfangs abzubilden mit dem Außenumfang.
Die eigentlichen Bindungen werden mit zusätzlichen Attributen erstellt, die an die Direktive angehängt werden. Die Bindungseinstellungen werden mit der scope und einem Objekt mit Schlüssel-Wert-Paaren definiert:
- Ein Schlüssel , der dem isolierten Geltungsbereich unserer Richtlinie entsprach
- Ein Wert , der Angular mitteilt, wie der innere Gültigkeitsbereich der Anweisung an ein übereinstimmendes Attribut gebunden wird
Einfaches Beispiel für eine Direktive mit isoliertem Geltungsbereich:
var ProgressBar = function() {
return {
scope: { // This is how we define an isolated scope
current: '=', // Create a REQUIRED bidirectional binding by using the 'current' attribute
full: '=?maxValue' // Create an OPTIONAL (Note the '?'): bidirectional binding using 'max-value' attribute to the `full` property in our directive isolated scope
}
template: '<div class="progress-back">' +
' <div class="progress-bar"' +
' ng-style="{width: getProgress()}">' +
' </div>' +
'</div>',
link: function(scope, el, attrs) {
if (scope.full === undefined) {
scope.full = 100;
}
scope.getProgress = function() {
return (scope.current / scope.size * 100) + '%';
}
}
}
}
ProgressBar.$inject = [];
angular.module('app').directive('progressBar', ProgressBar);
Beispiel für die Verwendung dieser Direktive und das Binden von Daten aus dem Controller-Bereich an den internen Geltungsbereich der Direktive:
Regler:
angular.module('app').controller('myCtrl', function($scope) {
$scope.currentProgressValue = 39;
$scope.maxProgressBarValue = 50;
});
Aussicht:
<div ng-controller="myCtrl">
<progress-bar current="currentProgressValue"></progress-bar>
<progress-bar current="currentProgressValue" max-value="maxProgressBarValue"></progress-bar>
</div>
Eine wiederverwendbare Komponente erstellen
Mithilfe von Direktiven können wiederverwendbare Komponenten erstellt werden. Hier ist ein Beispiel einer "User Box" Komponente:
userBox.js
angular.module('simpleDirective', []).directive('userBox', function() {
return {
scope: {
username: '=username',
reputation: '=reputation'
},
templateUrl: '/path/to/app/directives/user-box.html'
};
});
Controller.js
var myApp = angular.module('myApp', ['simpleDirective']);
myApp.controller('Controller', function($scope) {
$scope.user = "John Doe";
$scope.rep = 1250;
$scope.user2 = "Andrew";
$scope.rep2 = 2850;
});
myPage.js
<html lang="en" ng-app="myApp">
<head>
<script src="/path/to/app/angular.min.js"></script>
<script src="/path/to/app/js/controllers/Controller.js"></script>
<script src="/path/to/app/js/directives/userBox.js"></script>
</head>
<body>
<div ng-controller="Controller">
<user-box username="user" reputation="rep"></user-box>
<user-box username="user2" reputation="rep2"></user-box>
</div>
</body>
</html>
user-box.html
<div>{{username}}</div>
<div>{{reputation}} reputation</div>
Das Ergebnis wird sein:
John Doe
1250 reputation
Andrew
2850 reputation
Direktive Dekorateur
In manchen Fällen benötigen Sie möglicherweise zusätzliche Funktionen aus einer Direktive. Anstatt die Direktive neu zu schreiben (zu kopieren), können Sie das Verhalten der Direktive ändern.
Der Dekorator wird während der $ Injektionsphase ausgeführt.
Stellen Sie dazu eine .config für Ihr Modul bereit. Die Direktive heißt myDirective, daher müssen Sie myDirectiveDirective konfigurieren. (dies in einer Winkelkonvention [über Anbieter lesen]).
In diesem Beispiel wird die templateUrl der Direktive geändert:
angular.module('myApp').config(function($provide){
$provide.decorator('myDirectiveDirective', function($delegate){
var directive = $delegate[0]; // this is the actual delegated, your directive
directive.templateUrl = 'newTemplate.html'; // you change the directive template
return $delegate;
})
});
In diesem Beispiel fügen Sie dem Direktive-Element ein OnClick-Ereignis hinzu, wenn Sie darauf klicken. Dies geschieht während der Kompilierungsphase.
angular.module('myApp').config(function ($provide) {
$provide.decorator('myDirectiveTwoDirective', function ($delegate) {
var directive = $delegate[0];
var link = directive.link; // this is directive link phase
directive.compile = function () { // change the compile of that directive
return function (scope, element, attrs) {
link.apply(this, arguments); // apply this at the link phase
element.on('click', function(){ // when add an onclick that log hello when the directive is clicked.
console.log('hello!');
});
};
};
return $delegate;
});
});
Ein ähnlicher Ansatz kann sowohl für Anbieter als auch für Dienste verwendet werden.
Vererbung und Interoperabilität der Richtlinie
Angular js-Direktiven können verschachtelt oder interoperabel gemacht werden.
In diesem Beispiel macht die Direktive Adir der Direktive Bdir den Controller $ scope aus, da Bdir Adir benötigt.
angular.module('myApp',[]).directive('Adir', function () {
return {
restrict: 'AE',
controller: ['$scope', function ($scope) {
$scope.logFn = function (val) {
console.log(val);
}
}]
}
})
Stellen Sie sicher, dass Require gesetzt ist: '^ Adir' (sehen Sie sich die Winkeldokumentation an, einige Versionen benötigen kein ^ Zeichen).
.directive('Bdir', function () {
return {
restrict: 'AE',
require: '^Adir', // Bdir require Adir
link: function (scope, elem, attr, Parent) {
// Parent is Adir but can be an array of required directives.
elem.on('click', function ($event) {
Parent.logFn("Hello!"); // will log "Hello! at parent dir scope
scope.$apply(); // apply to parent scope.
});
}
}
}]);
Sie können Ihre Direktive auf diese Weise verschachteln:
<div a-dir><span b-dir></span></div>
<a-dir><b-dir></b-dir> </a-dir>
Es ist nicht erforderlich, dass Anweisungen in Ihrem HTML-Code verschachtelt sind.
