Angularjs Direktive: Isolierter Umfang

Was bedeutet Isolierter Umfang?

In den Anwendungen von AngularJS haben die Direktiven standardmäßig Zugriff auf den übergeordneten Bereich. Die folgende Direktive stützt sich beispielsweise auf den übergeordneten Bereich, um den Namen und die Street-Eigenschaften eines Kundenobjekts auszugeben:

angular.module('MyModule').directive('MyDirective', function () {
    return {
        template: 'Name: [[ user.name ]] Street: [[ user.street ]]' // print symbols are Interpolated
    };
});

Obwohl dieser Code die Arbeit erledigt, müssen Sie viel über den übergeordneten Bereich wissen, um die Direktive zu verwenden und genauso einfach ng-include und eine HTML-Vorlage verwenden, um dasselbe zu erreichen (dies wurde im ersten Beitrag besprochen). Wenn sich der übergeordnete Bereich auf einmal ändert, ist die Direktive nicht mehr nützlich.

Wenn Sie eine wiederverwendbare Direktive erstellen möchten, können Sie sich nicht auf den übergeordneten Bereich verlassen und müssen stattdessen etwas mit dem Namen Isolate Scope verwenden. Hier ist ein Diagramm, das den verteilten Umfang mit dem isolierten Umfang vergleicht:

Erstellen vom isolierten Umfang

Die Isolierung des Umfangs in einer Direktive ist ein einfacher Prozess. Beginnen Sie mit dem Hinzufügen einer Scope-Eigenschaft in der Direktive, wie unten gezeigt. Dadurch wird der Geltungsbereich der Direktive automatisch von allen übergeordneten Geltungsbereich(en) getrennt.

angular.module('MyModule').directive('MyDirective', function () {
    return {
        scope: {},
        template: 'Name: [[ user.name ]] Street: [[ user.street ]]' // print symbols are Interpolated
    };
});

Die Eigenschaft @ Scope

ie Eigenschaft @ local scope wird verwendet, um auf Zeichenkettenwerte, die außerhalb der Direktive definiert sind, zuzugreifen. Beispielsweise kann ein Controller eine Namenseigenschaft für das $scope-Objekt definieren, und Sie müssen innerhalb der Direktive Zugriff auf diese Eigenschaft erhalten. Um das zu tun, können Sie @ innerhalb der Scope-Eigenschaft der Direktive verwenden. Hier ist ein hochrangiges Beispiel für dieses Konzept mit einer Schritt-für-Schritt-Anleitung:

• Ein Controller definiert $scope.name.
• Der Wert der Eigenschaft $scope.name muss in die Direktive übergeben werden.
• Die Direktive erstellt eine benutzerdefinierte lokale Scope-Eigenschaft innerhalb ihres isolate scope named name (beachten Sie, dass die Eigenschaft alles benannt werden kann und nicht mit dem Eigenschaftsnamen des Objekts $scope). Das geschieht mithilfe von Scope { name: ‘@’ }.
• Das Zeichen @ teilt der Direktive mit, dass auf den Wert, der in die neue Namenseigenschaft übergeben wird, als Zeichenkette zugegriffen wird. Wenn sich der Außenwert ändert, wird die Eigenschaft name im Isolatbereich der Direktive automatisch aktualisiert.
• Die Vorlage innerhalb der Direktive kann sich nun an die Eigenschaft name des isolate scope binden.

angular.module('MyModule').controller('UsersController', ['$scope', function ($scope) {
    var counter = 0;
    $scope.users = {
        name: 'John',
        street: 'xxxx Anywhere St.'
    };
            
    $scope.users = [
        {
            name: 'John',
            street: 'xxxx Anywhere St.'
        },
        {
            name: 'Mike',
            street: 'xxxx Crest St.'
        },
        {
            name: 'Tom',
            street: 'xxxx Main St.'
        }
    ];
}]);

///////////////////////////////////////////////////////////////////
angular.module('MyModule').directive('MyDirective', function () {
    return {
        scope: {
          name: '@name',
          street: '@street'
        },
        template: 'Name: [[ name ]] Street: [[ street ]]'
    };
});

<div my-directive name="[[ user.name ]]" street="[[ user.street ]]"></div>
<!--Wir haben gerade Angular Interpolation verwendet, um die Drucksymbole zu ändern-->

Die Eigenschaft = Scope

Das Zeichen @ eignet sich gut für den Zugriff auf einen Zeichenkettenwert, der wie im vorherigen Beispiel in eine Direktive übergeben wird. Es wird jedoch nicht gehalten, Änderungen an der Direktive in-synchron mit dem externen/externen Bereich zu synchronisieren. In Fällen, in denen Sie eine zweiseitige Bindung zwischen dem äußeren Bereich und dem Isolatbereich der Direktive erstellen müssen, können Sie das Zeichen = verwenden. Hier ist ein hochrangiges Beispiel für dieses Konzept mit einer Schritt-für-Schritt-Anleitung:

• Ein Controller definiert ein Objekt $scope.person.
• Das Objekt $scope.person muss so in die Direktive eingefügt werden, dass eine gegenseitige Bindung entsteht.
• Die Direktive erstellt eine benutzerdefinierte lokale Scope-Eigenschaft innerhalb ihres Isolatbereichs namens { customer: ‘=’ }.
• Das Zeichen = teilt der Direktive mit, dass das in die Kundeneigenschaft übergebene Objekt über eine bidirektionale Bindung gebunden werden soll. Wenn sich der Wert der externen Eigenschaft ändert, sollte die Kundeneigenschaft der Richtlinie automatisch aktualisiert werden. Wenn sich die Kundeneigenschaft der Richtlinie ändert, sollte das Objekt im externen Bereich automatisch aktualisiert werden.
• Die Vorlage innerhalb der Direktive kann sich nun an die Kundeneigenschaft des Isolate-Scopes binden.