Verwendung der Symbole '@', '&', '=' und '>' in der Bereichsbindung der benutzerdefinierten Direktive: AngularJS

Ich habe viel über die Verwendung dieser Symbole bei der Implementierung benutzerdefinierter Anweisungen in AngularJS gelesen, aber das Konzept ist mir immer noch nicht klar. Ich meine, was bedeutet es, wenn ich einen der Bereichswerte in der benutzerdefinierten Direktive verwende?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

Was genau machen wir hier mit dem Umfang?

Ich bin mir auch nicht sicher, ob "scope: '>'" in der offiziellen Dokumentation vorhanden ist oder nicht. Es wurde in meinem Projekt verwendet.

Edit-1

Die Verwendung von "scope: '>'" war ein Problem in meinem Projekt und wurde behoben.

In einer AngularJS-Direktive können Sie mit dem Bereich auf die Daten in den Attributen des Elements zugreifen, auf das die Direktive angewendet wird.

Dies wird am besten anhand eines Beispiels veranschaulicht:

<div my-customer name="Customer XYZ"></div>

und die Richtliniendefinition:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

Wenn die scopeEigenschaft verwendet wird, befindet sich die Direktive im sogenannten "isolierten Bereich" -Modus, was bedeutet, dass sie nicht direkt auf den Bereich des übergeordneten Controllers zugreifen kann.

In sehr einfachen Worten ist die Bedeutung der Bindungssymbole:

someObject: '=' (bidirektionale Datenbindung)

someString: '@'(direkt oder durch Interpolation mit doppelter geschweifter Klammer {{}})

someExpression: '&'(zB hideDialog())

Diese Informationen sind auf der Dokumentationsseite der AngularJS-Direktive enthalten , obwohl sie auf der gesamten Seite etwas verteilt sind.

Das Symbol >ist nicht Teil der Syntax.

Existiert <jedoch als Teil der AngularJS-Komponentenbindungen und bedeutet Einwegbindung.

> ist nicht in der Dokumentation.

< ist für die Einwegbindung.

@Bindung dient zum Übergeben von Zeichenfolgen. Diese Zeichenfolgen unterstützen {{}}Ausdrücke für interpolierte Werte.

=Die Bindung dient zur bidirektionalen Modellbindung. Das Modell im übergeordneten Bereich ist mit dem Modell im isolierten Bereich der Richtlinie verknüpft.

& Beim Binden wird eine Methode in den Geltungsbereich Ihrer Direktive übergeben, damit sie innerhalb Ihrer Direktive aufgerufen werden kann.

Wenn wir in der Direktive scope: true festlegen, erstellt Angular js einen neuen Gültigkeitsbereich für diese Direktive. Das bedeutet, dass Änderungen am Richtlinienbereich nicht im übergeordneten Controller berücksichtigt werden.

< Einwegbindung

= Zweiwegebindung

& Funktionsbindung

@ Übergeben Sie nur Zeichenfolgen

Wenn wir eine Kundenrichtlinie erstellen, kann der Geltungsbereich der Direktive isoliert sein. Dies bedeutet, dass die Direktive keinen Geltungsbereich mit dem Controller teilt. Sowohl die Richtlinie als auch der Controller haben ihren eigenen Geltungsbereich. Daten können jedoch auf drei Arten an den Richtlinienbereich übergeben werden.

1. Daten können als Zeichenfolge übergeben werden, indem das @Zeichenfolgenliteral, der Zeichenfolgenwert und die Einwegbindung verwendet werden.
2. Daten können als Objekt mit dem =String-Literal übergeben werden, Objekt übergeben, 2-Wege-Bindung.
3. Daten können als Funktion übergeben werden. Das &String-Literal ruft eine externe Funktion auf und kann Daten von der Direktive an die Steuerung übergeben.

Die AngularJS-Dokumentation zu Direktiven ist ziemlich gut geschrieben, was die Symbole bedeuten.

Um klar zu sein, können Sie nicht einfach haben

scope: '@'

in einer Richtliniendefinition. Sie müssen Eigenschaften haben, für die diese Bindungen gelten, wie in:

scope: {
    myProperty: '@'
}

Ich empfehle Ihnen dringend, die Dokumentation und die Tutorials auf der Website zu lesen. Es gibt viel mehr Informationen, die Sie über isolierte Bereiche und andere Themen wissen müssen.

Hier ist ein direktes Zitat von der oben verlinkten Seite zu den Werten von scope:

Die Eigenschaft scope kann true, ein Objekt oder ein falscher Wert sein:

• Falsy : Für die Richtlinie wird kein Geltungsbereich erstellt. Die Richtlinie verwendet den Geltungsbereich ihrer Eltern.

• true: Für das Element der Direktive wird ein neuer untergeordneter Bereich erstellt, der prototypisch von seinem übergeordneten Bereich erbt. Wenn mehrere Anweisungen für dasselbe Element einen neuen Bereich anfordern, wird nur ein neuer Bereich erstellt. Die neue Bereichsregel gilt nicht für den Stamm der Vorlage, da der Stamm der Vorlage immer einen neuen Bereich erhält.

• {...} (ein Objekt-Hash) : Für das Element der Direktive wird ein neuer Bereich "Isolieren" erstellt. Der Bereich "Isolieren" unterscheidet sich vom normalen Bereich darin, dass er nicht prototypisch von seinem übergeordneten Bereich erbt. Dies ist nützlich, wenn Sie wiederverwendbare Komponenten erstellen, die nicht versehentlich Daten im übergeordneten Bereich lesen oder ändern sollten.

^{Abgerufen am 13.02.2017 von https://code.angularjs.org/1.4.11/docs/api/ng/service/ $ compile # -scope-, lizenziert als CC-by-SA 3.0}

Ich hatte Probleme, einen Wert mit einem der Symbole in AngularJS 1.6 zu binden. Ich habe überhaupt keinen Wert erhalten, nur undefinedobwohl ich es genauso gemacht habe wie andere Bindungen in derselben Datei, die funktioniert haben.

Problem war: Mein Variablenname hatte einen Unterstrich.

Dies schlägt fehl:

bindings: { import_nr: '='}

Das funktioniert:

bindings: { importnr: '='}

(Nicht vollständig mit der ursprünglichen Frage verwandt, aber das war eines der besten Suchergebnisse, als ich es mir ansah. Hoffentlich hilft dies jemandem mit dem gleichen Problem.)