Uso di ng-src vs src

Questo tutorial dimostra l'uso della direttiva ngSrcinvece di src:

<ul class="phones">
    <li ng-repeat="phone in phones" class="thumbnail">
        <img ng-src="{{phone.imageUrl}}">
    </li>
</ul>

Chiedono di:

Sostituisci la direttiva ng-src con un semplice attributo src vecchio.
Utilizzando strumenti come Firebug o Web Inspector di Chrome o ispezionando i log di accesso al server web, conferma che l'app sta effettivamente effettuando una richiesta estranea a /app/%7B%7Bphone.imageUrl%7D%7D (o / app / {{phone .imageUrl}} ).

L'ho fatto e mi ha dato il risultato corretto:

<li class="thumbnail ng-scope" ng-repeat="phone in phones">
    <img src="img/phones/motorola-xoom.0.jpg">
</li>

C'è un motivo per cui?

<img ng-src="{{phone.imageUrl}}"> 

Questo ti dà il risultato atteso, perché phone.imageUrlviene valutato e sostituito dal suo valore dopo che angolare è stato caricato.

<img src="{{phone.imageUrl}}">

Ma con questo, il browser tenta di caricare un'immagine denominata {{phone.imageUrl}}, il che si traduce in una richiesta non riuscita. Puoi verificarlo nella console del tuo browser.

Da Angular docs

Il modo sbagliato per scriverlo:

<img src="http://www.gravatar.com/avatar/{{hash}}"/>

Il modo corretto per scriverlo:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>

Perché? questo perché al caricamento della pagina, prima del bootstrap angolare e della creazione dei controller, il browser tenterà di caricare l'immagine da http://www.gravatar.com/avatar/{{hash}}e fallirà. Quindi una volta avviato angular, capisce che {{hash}}deve essere sostituito con diciamo logo.png, ora l'attributo src cambia http://www.gravatar.com/avatar/logo.pnge l'immagine viene caricata correttamente. Il problema è che ci sono 2 richieste in corso e la prima non riesce.

Per risolvere questo problema dovremmo usare ng-srcche è una direttiva angolare e angolare sostituirà il ng-srcvalore nell'attributo src solo dopo che il bootstrap angolare e i controller sono stati completamente caricati, e in quel momento {{hash}}sarebbe già stato sostituito con il valore dell'ambito corretto.

Non src="{{phone.imageUrl}}"è necessario e crea una richiesta aggiuntiva da parte del browser. Il browser effettuerà almeno 2 GETrichieste tentando di caricare quell'immagine:

1. prima che l'espressione venga valutata {{phone.imageUrl}}
2. dopo che l'espressione è stata valutata img/phones/motorola-xoom.0.jpg

Dovresti sempre usare la ng-srcdirettiva quando hai a che fare con espressioni angolari. <img ng-src="{{phone.imageUrl}}">ti dà il risultato atteso di una singola richiesta.

In una nota a margine , lo stesso vale in ng-hrefmodo da non ottenere collegamenti interrotti fino a quando non si avvia il primo ciclo di digest.

Bene, in realtà ha senso al 100% perché l'HTML viene elaborato in sequenza e quando questa pagina HTML viene elaborata riga per riga, quando arriva a questa immagine, la riga e l'elaborazione dell'immagine, il nostro phone.imageUrlnon è ancora definito.

E infatti, Angular JS non ha ancora elaborato questo pezzo di HTML e non ha ancora cercato questi segnaposto e sostituito queste espressioni con i valori. Quindi quello che finisce per accadere è che il browser riceve questa riga e cerca di recuperare questa immagine a questo URL.

E ovviamente questo è un URL fasullo, se ha ancora quei baffi e parentesi graffe, e quindi ti dà un 404, ma una volta che ovviamente Angular si prende cura di questo, sostituisce questo URL con quello corretto, e poi vediamo ancora l'immagine, ma il messaggio di errore 404 rimane nella nostra console.

Quindi, come possiamo occuparcene? Bene, non possiamo occuparci di questo usando normali trucchi HTML. Ma possiamo occuparcene usando Angular. Abbiamo bisogno in qualche modo di dire al browser di non provare a recuperare questo URL ma allo stesso tempo di recuperarlo solo quando Angular è pronto per l'interpretazione di questi segnaposto.

Bene, un modo per farlo è mettere qui un attributo Angular invece di quello HTML standard. E l'attributo Angular è giusto ng-src. Quindi se lo diciamo ora, torna indietro, vedrai che non ci sono più errori perché l'immagine è stata recuperata solo una volta che Angular ha acquisito questo HTML e ha tradotto tutte le espressioni nei loro valori.