Ich bin sehr neu bei AngularJS. Kann mir jemand den Unterschied zwischen diesen AngularJS-Operatoren erklären: &, @ and =wenn man den Bereich anhand eines geeigneten Beispiels isoliert.

@Ermöglicht die Übergabe eines im Direktivenattribut definierten Werts an den Isolationsbereich der Direktive. Der Wert kann ein einfacher Zeichenfolgenwert ( myattr="hello") oder eine interpolierte AngularJS-Zeichenfolge mit eingebetteten Ausdrücken ( myattr="my_{{helloText}}") sein. Stellen Sie sich das als "Einweg" -Kommunikation vom übergeordneten Bereich in die untergeordnete Richtlinie vor. John Lindquist hat eine Reihe von kurzen Screencasts, die diese erklären. Der Screencast auf @ ist hier: https://egghead.io/lessons/angularjs-isolate-scope-attribute-binding

&Ermöglicht dem isolierten Bereich der Direktive, Werte zur Auswertung in dem im Attribut definierten Ausdruck an den übergeordneten Bereich zu übergeben. Beachten Sie, dass das Direktivenattribut implizit ein Ausdruck ist und keine Syntax für doppelte geschweifte Klammern verwendet. Dieser ist schwieriger im Text zu erklären. Der Screencast zu & ist hier: https://egghead.io/lessons/angularjs-isolate-scope-expression-binding

=Richtet einen bidirektionalen Bindungsausdruck zwischen dem Isolatbereich der Direktive und dem übergeordneten Bereich ein. Änderungen im untergeordneten Bereich werden an den übergeordneten Bereich weitergegeben und umgekehrt. Stellen Sie sich = als eine Kombination aus @ und & vor. Der Screencast auf = ist hier: https://egghead.io/lessons/angularjs-isolate-scope-two-way-binding

Und schließlich ist hier ein Screencast, der alle drei zusammen in einer einzigen Ansicht zeigt: https://egghead.io/lessons/angularjs-isolate-scope-review

Ich möchte die Konzepte aus der Perspektive der Vererbung von JavaScript-Prototypen erläutern. Hoffentlich helfen zu verstehen.

Es gibt drei Möglichkeiten, den Geltungsbereich einer Richtlinie zu definieren:

1. scope: false: Winkelstandard. Der Geltungsbereich der Direktive entspricht genau dem des übergeordneten Geltungsbereichs ( parentScope).
2. scope: true: Angular schafft einen Bereich für diese Direktive. Der Bereich erbt prototypisch von parentScope.
3. scope: {...}: Der isolierte Bereich wird unten erläutert.

Angabe scope: {...}definiert eine isolatedScope. Eine isolatedScopenicht vererben Eigenschaften aus parentScope, obwohl isolatedScope.$parent === parentScope. Es ist definiert durch:

app.directive("myDirective", function() {
    return {
        scope: {
            ... // defining scope means that 'no inheritance from parent'.
        },
    }
})

isolatedScopehat keinen direkten Zugriff auf parentScope. Aber manchmal muss die Richtlinie mit der kommunizieren parentScope. Sie kommunizieren durch @, =und &. Das Thema , über Symbole verwendet @, =und &spricht über SzenarienisolatedScope .

Es wird normalerweise für einige gemeinsame Komponenten verwendet, die von verschiedenen Seiten gemeinsam genutzt werden, z. B. Modals. Ein isolierter Bereich verhindert die Verschmutzung des globalen Bereichs und kann problemlos zwischen Seiten geteilt werden.

Hier ist eine grundlegende Anweisung: http://jsfiddle.net/7t984sf9/5/ . Ein Bild zur Veranschaulichung ist:

@: Einwegbindung

@übergibt einfach die Eigenschaft von parentScopebis isolatedScope. Es wird aufgerufen one-way binding, was bedeutet, dass Sie den Wert von parentScopeEigenschaften nicht ändern können . Wenn Sie mit der JavaScript-Vererbung vertraut sind, können Sie diese beiden Szenarien leicht verstehen:

• Wenn die Bindungseigenschaft ein primitiver Typ ist, wie interpolatedPropim Beispiel: Sie können ändern interpolatedProp, parentProp1würden aber nicht geändert. Wenn Sie jedoch den Wert von ändern parentProp1, interpolatedPropwird dieser mit dem neuen Wert überschrieben (bei eckigem $ Digest).

• Wenn es sich bei der Bindungseigenschaft um ein Objekt handelt, z. B parentObj.: Da die übergebene Eigenschaft isolatedScopeeine Referenz ist, löst das Ändern des Werts diesen Fehler aus:

  TypeError: Cannot assign to read only property 'x' of {"x":1,"y":2}

=: Zweiwegebindung

=wird aufgerufen two-way binding, was bedeutet, dass bei jeder Änderung in childScopeauch der Wert in aktualisiert parentScopewird und umgekehrt. Diese Regel gilt sowohl für Grundelemente als auch für Objekte. Wenn Sie den Bindungstyp von ändern parentObj, werden =Sie feststellen, dass Sie den Wert von ändern können parentObj.x. Ein typisches Beispiel ist ngModel.

&: Funktionsbindung

&Ermöglicht der Direktive, eine parentScopeFunktion aufzurufen und einen Wert aus der Direktive zu übergeben. Überprüfen Sie beispielsweise JSFiddle: & im Direktivenbereich .

Definieren Sie eine anklickbare Vorlage in der Direktive wie folgt:

<div ng-click="vm.onCheck({valueFromDirective: vm.value + ' is from the directive'})">

Und verwenden Sie die Richtlinie wie folgt:

<div my-checkbox value="vm.myValue" on-check="vm.myFunction(valueFromDirective)"></div>

Die Variable valueFromDirectivewird von der Direktive an den übergeordneten Controller übergeben {valueFromDirective: ....

Referenz: Grundlegendes zu Bereichen

Nicht meine Geige, aber http://jsfiddle.net/maxisam/QrCXh/ zeigt den Unterschied. Das Schlüsselstück ist:

           scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        

@ : Einwegbindung

= : bidirektionale Bindung

& : Funktionsbindung

AngularJS - Isolierte Bereiche - @ vs = vs &

Kurze Beispiele mit Erläuterungen finden Sie unter folgendem Link:

http://www.codeforeach.com/angularjs/angularjs-isolated-scopes-vs-vs

@ - Einwegbindung

In der Richtlinie:

scope : { nameValue : "@name" }

Im Hinblick auf:

<my-widget name="{{nameFromParentScope}}"></my-widget>

= - bidirektionale Bindung

In der Richtlinie:

scope : { nameValue : "=name" },
link : function(scope) {
  scope.name = "Changing the value here will get reflected in parent scope value";
}

Im Hinblick auf:

<my-widget name="{{nameFromParentScope}}"></my-widget>

& - Funktionsaufruf

In der Richtlinie:

scope : { nameChange : "&" }
link : function(scope) {
  scope.nameChange({newName:"NameFromIsolaltedScope"});
}

Im Hinblick auf:

<my-widget nameChange="onNameChange(newName)"></my-widget>

Ich habe verdammt lange gebraucht, um das wirklich in den Griff zu bekommen. Der Schlüssel zu mir war zu verstehen, dass "@" für Dinge steht, die vor Ort ausgewertet und als Konstante in die Direktive übernommen werden sollen, wobei "=" das Objekt selbst tatsächlich übergibt.

Es gibt einen schönen Blog-Beitrag, der dies unter folgender Adresse erklärt: http://blog.ramses.io/technical/AngularJS-the-difference-between-@-&-and-=-when-declaring-directives-using-isolate-scopes