AngularJS
Opzioni di collegamenti AngularJS (`=`, `@`, `&` ecc.)
Ricerca…
Osservazioni
Usa questo plunker per giocare con degli esempi.
@ rilegatura unidirezionale, associazione degli attributi.
Passa in un valore letterale (non un oggetto), come una stringa o un numero.
L'ambito figlio ottiene il proprio valore, se aggiorna il valore, l'ambito genitore ha il suo valore precedente (l'ambito figlio non può modificare il valore dell'ambito parentale). Quando viene modificato il valore dell'ambito genitore, anche il valore dell'ambito secondario verrà modificato. Tutte le interpolazioni vengono visualizzate ogni volta durante la digitazione, non solo sulla creazione di direttive.
<one-way text="Simple text." <!-- 'Simple text.' -->
simple-value="123" <!-- '123' Note, is actually a string object. -->
interpolated-value="{{parentScopeValue}}" <!-- Some value from parent scope. You can't change parent scope value, only child scope value. Note, is actually a string object. -->
interpolated-function-value="{{parentScopeFunction()}}" <!-- Executes parent scope function and takes a value. -->
<!-- Unexpected usage. -->
object-item="{{objectItem}}" <!-- Converts object|date to string. Result might be: '{"a":5,"b":"text"}'. -->
function-item="{{parentScopeFunction}}"> <!-- Will be an empty string. -->
</one-way>
= rilegatura a doppio senso.
Passando un valore per riferimento, si desidera condividere il valore tra entrambi gli ambiti e manipolarli da entrambi gli ambiti. Non si dovrebbe usare {{...}} per l'interpolazione.
<two-way text="'Simple text.'" <!-- 'Simple text.' -->
simple-value="123" <!-- 123 Note, is actually a number now. -->
interpolated-value="parentScopeValue" <!-- Some value from parent scope. You may change it in one scope and have updated value in another. -->
object-item="objectItem" <!-- Some object from parent scope. You may change object properties in one scope and have updated properties in another. -->
<!-- Unexpected usage. -->
interpolated-function-value="parentScopeFunction()" <!-- Will raise an error. -->
function-item="incrementInterpolated"> <!-- Pass the function by reference and you may use it in child scope. -->
</two-way>
Passare la funzione per riferimento è una cattiva idea: consentire all'oscilloscopio di cambiare la definizione di una funzione e verranno creati due osservatori non necessari, è necessario ridurre al minimo il numero di osservatori.
& binding di funzioni, binding di espressioni.
Passa un metodo in una direttiva. Fornisce un modo per eseguire un'espressione nel contesto dell'ambito principale. Il metodo verrà eseguito nell'ambito del genitore, è possibile passare alcuni parametri dall'ambito figlio. Non si dovrebbe usare {{...}} per l'interpolazione. Quando si utilizza & in una direttiva, viene generata una funzione che restituisce il valore dell'espressione valutata rispetto all'ambito principale (non lo stesso di = in cui si passa solo un riferimento).
<expression-binding interpolated-function-value="incrementInterpolated(param)" <!-- interpolatedFunctionValue({param: 'Hey'}) will call passed function with an argument. -->
function-item="incrementInterpolated" <!-- functionItem({param: 'Hey'})() will call passed function, but with no possibility set up a parameter. -->
text="'Simple text.'" <!-- text() == 'Simple text.'-->
simple-value="123" <!-- simpleValue() == 123 -->
interpolated-value="parentScopeValue" <!-- interpolatedValue() == Some value from parent scope. -->
object-item="objectItem"> <!-- objectItem() == Object item from parent scope. -->
</expression-binding>
Tutti i parametri saranno inclusi in funzioni.
Associazione disponibile tramite un semplice campione
angular.component("SampleComponent", {
bindings: {
title: '@',
movies: '<',
reservation: "=",
processReservation: "&"
}
});
Qui abbiamo tutti gli elementi vincolanti.
@ indica che abbiamo bisogno di un binding molto semplice , dall'ambito padre all'ambito figli, senza alcun osservatore, in alcun modo. Ogni aggiornamento nello scope genitore rimarrebbe nell'ambito genitore e qualsiasi aggiornamento sull'ambito secondario non verrebbe comunicato all'ambito genitore.
< indica un legame unidirezionale . Gli aggiornamenti nell'ambito genitore verrebbero propagati all'ambito figli, ma qualsiasi aggiornamento nell'ambito figli non verrebbe applicato all'ambito principale.
= è già noto come rilegatura a doppio senso. Ogni aggiornamento sull'ambito genitore verrebbe applicato a quelli secondari e ogni aggiornamento secondario verrebbe applicato all'ambito principale.
& viene ora utilizzato per un binding di output. Secondo la documentazione del componente, dovrebbe essere usato per fare riferimento al metodo dello scope genitore. Invece di manipolare l'ambito figli, basta chiamare il metodo genitore con i dati aggiornati!
Bind attributo opzionale
bindings: {
mandatory: '='
optional: '=?',
foo: '=?bar'
}
Gli attributi facoltativi dovrebbero essere contrassegnati con un punto interrogativo: =?
o =?bar
. È protezione per l'eccezione ($compile:nonassign)
.