Perché {{}} non funziona negli attributi src? Perché ho bisogno di ngSrc?

Question

Questo funziona:

<a href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a> 

Ma questo non lo fa:

<img src="{{URLtoMyPerfectImage}}"> 

Uno ha bisogno di usare ngSrc invece. Posso sapere perché questo è il caso? Ho avuto un problema simile ottenendo un 'src' (o era 'href'? Non ricordo) per lavorare in Handlebars.js e rinunciò a questo (pressione per la consegna).

Si tratta di un problema di browser diffuso o qualcosa di simile?

Answer 1

Estendere la risposta sopra di me, mentre

<a href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a> 

opere, non è la migliore pratica quando si creano dinamicamente i collegamenti con angolare. Ogni volta che usi l'associazione dei dati in un tag di ancoraggio dovresti usare la direttiva ng-href. Quindi il codice per il tag di ancoraggio dovrebbe essere simile:

<a ng-href="{{myAwesomeLink}}">It's a link. A dynamic one, at that.</a> 

Direttamente dalla documentazione del angolare:

Utilizzando markup angolare come in un attributo href rende la pagina aperta a un URL sbagliato, se l'utente fa clic quel collegamento prima che angolare abbia la possibilità di sostituire l'URL reale con, il collegamento sarà interrotto e molto probabilmente restituirà un errore 404. La direttiva ngHref risolve questo problema.

Questo ci aiuta a capire ng-src: Quindi, con

<img src="{{imgPath}}"> 

Il browser tenta di caricare l'immagine, ma angolare non ha ancora sostituito l'espressione tra parentesi all'interno della src, quindi l'immagine non riesce a caricare . Utilizzando

<img ng-src="{{imgPath}}"> 

si sta dicendo al browser di attendere per caricare l'immagine fino a quando l'espressione tra parentesi è stato compilato, caricando l'immagine corretta.

Answer 2

Il documentation menzione questo

Utilizzando markup angolare come {{hash}} in un attributo src non funziona destra: Il browser scaricherà dall'URL con il testo letterale {{hash} } fino a quando Angular sostituisce l'espressione all'interno di {{hash}}. La direttiva ngSrc risolve questo problema.

Se si pensa con attenzione, l'associazione dati javascript per il codice HTML accade dopo che il DOM HTML viene caricato, in modo che il browser vede lo src intial come {{url}} piuttosto che una stringa URL valido e fallisce.