Ambito di applicazione angularjs isolato + associazione dati unidirezionale non funzionante per gli oggetti?

Question

Ho creato una direttiva personalizzata che ha due valori. prima è l'oggetto config e il secondo è l'oggetto dati. Modifico questo config e gli oggetti dati all'interno della mia direttiva che lo sta riflettendo nell'ambito genitore. Che mi sta causando un errore quando devo usare la direttiva più volte.

Ho seguito https://umur.io/angularjs-directives-using-isolated-scope-with-attributes/ e sto usando scope isolato.

Desidero un collegamento dati unidirezionale per oggetti in ambito isolato. Qualunque cosa cambi nella funzione direttiva non dovrebbe riflettersi nello scope genitore.

di seguito è l'ambito della direttiva.

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

ecco come accedo nella funzione di collegamento della direttiva

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

Io parto dal presupposto che passano con riferimento sta accadendo qui.

Sto aggiungendo JSbin. controllare la console il valore dell'oggetto sta cambiando e riflettendo nell'ambito genitore.

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

Answer 1

passando testo è one-way binding(@) e passando oggetto è two-way binding(=)

passando oggetto come testo

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

portata nella direttiva

scope: { 
     config: "@" 
    } 

convertire la stringa di nuovo a oggetto in collegamento

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

Answer 2

Si è corretto, il problema è che i tuoi oggetti JavaScript vengono passati per riferimento. L'uso di un legame unidirezionale copia il riferimento, ma il riferimento punterà ancora allo stesso oggetto.

mia impressione dal Angular docs for directives è sempre stato:

• Il '@' vincolante è destinato per le stringhe interpolate
• Il '=' Il legame è destinato per i dati strutturati che devono essere condivise tra gli ambiti
• il '&' vincolante è destinato a volte l'esecuzione di un'espressione che è legato al campo di applicazione genitore

Se si wan t di trattare l'oggetto associato dal genitore come immutabile, è possibile creare una copia completa degli oggetti all'interno del vostro codice di collegamento mediante angular.copy:

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

In alternativa, è possibile utilizzare un doppio senso di legame per questo e copiare l'oggetto allo stesso modo:

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);