Angularjs Direktiven isolierter Geltungsbereich + Einweg-Datenbindung funktioniert nicht für Objekte?

Question

Ich habe eine benutzerdefinierte Direktive erstellt, die zwei Werte hat. Das erste ist das Konfigurationsobjekt und das zweite ist das Datenobjekt. Ich ändere diese Konfigurations- und Datenobjekte innerhalb meiner Direktive, die sie im übergeordneten Bereich widerspiegelt. Das verursacht mir einen Fehler, wenn ich die Direktive mehrmals benutzen muss.

Ich folgte https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/ und ich verwende isolierten Bereich.

Ich möchte One-Way-Datenbindung für Objekte in isolierten Bereich. Was auch immer ich in der direction-Funktion ändere, sollte nicht im übergeordneten Bereich widerspiegeln.

unten ist der Anwendungsbereich der Richtlinie.

scope: { 
    config: "&config", 
    dataObj: "&dataObj" 
} 

hier ist, wie ich es in der Link-Funktion der Richtlinie Zugriff

var config = scope.config(); 
var dataObj= scope.dataObj(); 

ich diesen Pass von Referenz gehe davon hier geschieht.

Ich füge JSbin hinzu. Überprüfen Sie die Konsole, ob sich der Wert des Objekts im übergeordneten Bereich ändert und spiegelt.

https://jsbin.com/vagowe/edit?html,js,output

Answer 1

vorbei Text one-way binding(@) ist und Weitergabe Objekt ist two-way binding(=)

Objekt als Text

<custom-directive config="{{config}}"></custom-directive> 

Umfang in der Richtlinie

scope: { 
     config: "@" 
    } 

die Zeichenfolge zu konvertieren Objekt vorbei zurück in Verbindung

var config = angular.fromJson(scope.config); 

Answer 2

Sie sind richtig, das Problem ist, dass Ihre JavaScript-Objekte als Referenz übergeben werden. Wenn Sie eine unidirektionale Bindung verwenden, wird die Referenz kopiert, aber die Referenz verweist immer noch auf das gleiche Objekt.

Mein Eindruck von der Angular docs for directives war immer:

• Das ‚@‘ Bindung für interpolierte Strings soll
• Die ‚=‘ Bindung wird für strukturierte Daten gedacht, die
zwischen Bereiche geteilt werden sollte
• die ‚&‘ Bindung soll zum wiederholten einen Ausdruck ausführt, die

an den übergeordneten Bereich gebunden ist, wenn Sie wan t das gebundene Objekt aus dem übergeordneten als unveränderlich zu behandeln, können Sie eine tiefe Kopie der Objekte in Ihrem Link-Code erstellen angular.copy mit:

var config = angular.copy(scope.config()); 
var dataObj = angular.copy(scope.dataObj()); 

Alternativ können Sie eine Zwei-Wege-Bindung für diese verwenden können, und kopieren Sie das Objekt auf die gleiche Weise:

scope: { 
    config: "=", 
    dataObj: "=" 
} 

// ... 
// Inside the link function of the directive. 
// Note that scope.config and scope.dataObj are no longer functions! 

var config = angular.copy(scope.config); 
var dataObj = angular.copy(scope.dataObj);