Benutzerdefinierter Richtlinienbereich in AngularJS

1. Benutzerdefinierter Richtlinienbereich in AngularJS
2. Verwendung von den Scope: False oder Shared Scope in AngularJS
3. Verwendung von den Scope: True oder Inherited Scope in AngularJS
4. Verwendung von den Scope : {} oder den isolierten Scope in AngularJS
5. Verwendung von das @ oder die One-Way-Bindung in AngularJS
6. Verwendung von das = oder die Zwei-Wege-Bindung in AngularJS
7. Verwendung von das & oder die Methodenbindung in AngularJS

Der Geltungsbereich ermöglicht es AngularJS sicherzustellen, dass ein anderes Objekt nicht versehentlich ein Objekt ändern kann. Dies geschieht, indem eine neue Kopie des Objekts erstellt und im Arbeitsspeicher gespeichert wird.

Der Bereich wird auch als Sicherheitsmaßnahme verwendet, um zu verhindern, dass unbefugte Benutzer auf Objekte auf der Seite zugreifen. In diesem Artikel werden verschiedene bereichsbezogene Optionen und Taktiken behandelt, z. B. die Verwendung eines gemeinsam genutzten Bereichs, das Erben eines übergeordneten Bereichs und eines isolierten Bereichs.

Benutzerdefinierter Richtlinienbereich in AngularJS

Der Scope von AngularJS ist eines der wesentlichen Konzepte in AngularJS. Der Bereich wird verwendet, um die Sichtbarkeit bestimmter Variablen und Funktionen zu bestimmen.

Reden wir über Richtung; Wenn wir eine einzigartige Funktion in einer Anwendung haben und sie im gesamten Anwendungsabschnitt verwenden möchten, müssen wir einen Codesatz schreiben. In Angular werden sie als Direktiven bezeichnet.

Mit allen Direktiven ist ein Scope verknüpft. Dieser Bereich wird verwendet, um auf Daten und Methoden innerhalb der Vorlage zuzugreifen.

Richtlinien legen ihren Geltungsbereich nicht standardmäßig fest, es sei denn, dies wird ausdrücklich festgelegt. Infolgedessen behandeln Direktiven den Gültigkeitsbereich ihres übergeordneten Elements als ihren eigenen.

Indem wir AngularJS ein Konfigurationsobjekt übergeben, das als Direktivendefinitionsobjekt definiert ist, können wir den Standardbereich von Direktiven ändern. Lassen Sie uns tief in das Thema eintauchen.

Verwendung von den Scope: False oder Shared Scope in AngularJS

Es generiert einen einzelnen Geltungsbereich, der mit dem übergeordneten Geltungsbereich identisch ist, was bedeutet, dass alle Änderungen am übergeordneten Geltungsbereich im Geltungsbereich der Richtlinie widergespiegelt werden und umgekehrt gilt dies ebenfalls.

Javascript:

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: false,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML Quelltext:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

Wenn wir in diesem Beispiel den Namen des Textfelds ändern, ändert sich auch der Kopfzeilenname. Die Direktive verwendet ihren übergeordneten Geltungsbereich, da das DDO sie hier nicht einschließt.

Daher werden alle Änderungen, die wir innerhalb der Richtlinie vornehmen, auch im übergeordneten Geltungsbereich angewendet. Klicken Sie hier, um die Funktion des Codes wie oben erwähnt zu überprüfen.

Verwendung von den Scope: True oder Inherited Scope in AngularJS

Es ist ein abgeleiteter Bereich anstelle des Bereichs eines übergeordneten Elements. Die Änderungen werden nicht im Controllerbereich widergespiegelt, wenn Sie den Richtlinienbereich ändern.

Änderungen am übergeordneten Geltungsbereich werden jedoch im Geltungsbereich der Richtlinie widergespiegelt.

JavaScript-Code:

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: true,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML Quelltext:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

In diesem Beispiel wird der Wert des übergeordneten Bereichs auf dem Bildschirm angezeigt. Aber was passiert, wenn wir den Wert im Textfeld ändern?

Dann wird nur der untergeordnete Bereich geändert. Es zeigt an, dass der übergeordnete Bereich unverändert geblieben ist.

Klicken Sie hier, um die Funktion des Codes wie oben erwähnt zu überprüfen.

Verwendung von den Scope : {} oder den isolierten Scope in AngularJS

Der isolierte Geltungsbereich ist einer der wichtigsten Aspekte. Die Direktive erstellt hier ein neues Gültigkeitsbereichsobjekt, aber der übergeordnete Gültigkeitsbereich erbt nicht; Daher kennt es den übergeordneten Bereich nicht.

Wie können wir jedoch die Daten daraus abrufen und wie können wir sie bearbeiten, wenn wir keine Verbindung zum übergeordneten Bereich herstellen? Die Antwort ist, das Attribut der Entität in DDO zu setzen; Sie müssen jedoch zuerst Attribute in der Direktive festlegen.

Wir verwenden drei Präfixe im isolierten Bereich, um die Eigenschaft oder Methoden des Controllers mit Direktiven zu verknüpfen. Schauen wir uns an, wie das funktioniert.

Wenn eine Direktive irgendwelche Präfixe in ihrer Bereichseigenschaft in DDO entdeckt, überprüft sie sie in der Direktivendeklaration auf der HTML-Seite, wo die Direktive unter Verwendung des deklarierten Attributs aufgerufen wird.

Nach jedem der Präfixe können wir einen anderen Attributnamen angeben, um den Namen zu ändern.

AngularJS hat drei Arten von Präfixen.

1. @ - Einwegbindung
2. = - Direkte Modellbindung / Zwei-Wege-Bindung
3. & - Methodenbindung

Verwendung von das @ oder die One-Way-Bindung in AngularJS

Einseitige Bindung bedeutet, dass ein übergeordnetes Element etwas über das in der Anweisung widergespiegelte Attribut an den Geltungsbereich der Anweisung sendet. Änderungen an der Richtlinie werden jedoch nicht in der übergeordneten Richtlinie widergespiegelt.

Zeichenfolgenwerte werden mit dem Symbol @ übergeben.

JavaScript-Code:

var app = angular.module("Demo",[]);


app.directive("myDirective", function(){
    return {

 scope: {
            name: '@'
        },
        template: "<div>Name :  {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML Quelltext:

<div ng-app="Demo">

    <div ng-controller="Hello">

        <div my-directive class='directive'></div>

    </div>
</div>
<div ng-app="Demo"></div>

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

Verwendung von das = oder die Zwei-Wege-Bindung in AngularJS

Es wird verwendet, um ein Objekt anstelle einer Zeichenfolge an eine Direktive zu übergeben. Diese Entität kann sowohl von der übergeordneten als auch von der Anweisungsseite geändert werden.

Deshalb spricht man auch von Zweiweg. Um die bidirektionale Bindung zu verwenden, müssen Sie anstelle des Geltungsbereichs ein =-Zeichen setzen.

scope: {

 name: "="

}

Verwendung von das & oder die Methodenbindung in AngularJS

Es wird verwendet, um die Methode eines beliebigen übergeordneten Elements mit dem Gültigkeitsbereich der Richtlinie zu verbinden. Wir können dies immer dann verwenden, wenn wir die übergeordneten Methoden der Direktive aufrufen.

Es wird verwendet, um Funktionen aufzurufen, die derzeit nicht im Bereich sind. Um die Methodenbindung zu verwenden, müssen Sie das Symbol & anstelle des Bereichs setzen.

scope: {
     name: "&"
}

Das ist es; Wenn Sie immer noch verwirrt sind, lesen Sie die offizielle Dokumentation, indem Sie hier klicken.