wake-up-neo.com

Verwendung der Symbole '@', '&', '=' und '>' in der Gültigkeitsbereichsbindung 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 mit dem Umfang hier?

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.

139
MAC

In einer AngularJS-Direktive können Sie über den Gültigkeitsbereich auf die Daten in den Attributen des Elements zugreifen, auf das die Direktive angewendet wird.

Dies lässt sich am besten anhand eines Beispiels veranschaulichen:

<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 scope -Eigenschaft 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-Notation {{}} übergeben)

someExpression: '&' (z. B. hideDialog())

Diese Informationen befinden sich auf der AngularJS-Direktivendokumentationsseite , obwohl sie auf der gesamten Seite verteilt sind.

Das Symbol > ist nicht Bestandteil der Syntax.

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

112
VRPF

> ist nicht in der Dokumentation enthalten.

< ist für die Einwegbindung vorgesehen.

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

= Bindung ist für die bidirektionale Modellbindung vorgesehen. Das Modell im übergeordneten Bereich ist mit dem Modell im isolierten Bereich der Richtlinie verknüpft.

& Binding dient zum Übergeben einer Methode in den Gültigkeitsbereich Ihrer Direktive, damit diese in Ihrer Direktive aufgerufen werden kann.

Wenn Sie den Geltungsbereich festlegen: true in der Direktive, wird Angular js einen neuen Geltungsbereich für diese Direktive erstellen. Das bedeutet, dass Änderungen, die am Geltungsbereich der Richtlinie vorgenommen wurden, nicht im übergeordneten Controller übernommen werden.

162
Aravind

< Einwegbindung

= wechselseitige Bindung

& Funktionsbindung

@ übergebe nur Strings

35
Timothy.Li

Wenn wir eine Kundenanweisung erstellen, kann der Geltungsbereich der Anweisung im isolierten Geltungsbereich liegen. Dies bedeutet, dass die Anweisung keinen gemeinsamen Geltungsbereich mit dem Controller hat. Sowohl Direktive als auch Controller haben ihren eigenen Geltungsbereich. Es gibt drei Möglichkeiten, Daten an den Geltungsbereich der Richtlinie zu übergeben.

  1. Daten können als Zeichenfolge mit dem Zeichenfolgenliteral @ übergeben werden, Zeichenfolgenwert übergeben, Einwegbindung.
  2. Daten können als Objekt übergeben werden, indem das Zeichenfolgenliteral = (Objekt übergeben, 2-Wege-Bindung) verwendet wird.
  3. Daten können als Funktion übergeben werden. Das Zeichenfolgenliteral & ruft eine externe Funktion auf und kann Daten von der Direktive an den Controller übergeben.
3
Bac Nguyen

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

Um klar zu sein, kann man 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 scope-Eigenschaft kann true, ein Objekt oder ein falscher Wert sein:

  • falsy : Für die Direktive wird kein Geltungsbereich erstellt. Die Direktive 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 "Isolate" -Bereich 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 sollen.

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.

2
Heretic Monkey