Verwendung von ng-src vs src

Question

Diese tutorial zeigt die Verwendung der Richtlinie ngSrc statt src:

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

Sie fragen zu:

Ersetzen Sie die ng-src-Richtlinie mit einem einfachen alten src Attribut
Mit Tools wie Firebug oder Webinformationen Chrome oder die Webserver Zugriffsprotokolle Inspektion, bestätigen, dass die App in der Tat zu /app/%7B%7Bphone.imageUrl%7D%7D eine Fremd Anfrage macht (oder /app/{{phone.imageUrl}}).

Ich tat es und es gab mir das richtige Ergebnis:

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

Gibt es einen Grund, warum?

Answer 1

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

Dies gibt Ihnen Ergebnis erwartet, weil phone.imageUrl ausgewertet wird und durch ihren Wert ersetzt, nachdem Winkel geladen wird.

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

Aber mit diesem, versucht der Browser ein Bild {{phone.imageUrl}} Namen zu laden, die in einem Anforderungsfehler zur Folge hat. Sie können dies in der Konsole Ihres Browsers überprüfen.

Answer 2

Von Angular docs

Der Buggy Weg, es zu schreiben:

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

Der richtige Weg, es zu schreiben:

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

Warum? Dies liegt daran, dass der Browser beim Laden der Seite, vor dem eckigen Bootstrapping und der Erstellung von Controllern versucht, ein Image von http://www.gravatar.com/avatar/{{hash}} zu laden, und es wird fehlschlagen. Dann, sobald Winkel gestartet wird, versteht es, dass {{hash}} ersetzt werden muss mit sagen logo.png, jetzt src Attribut ändert sich zu http://www.gravatar.com/avatar/logo.png und Bild korrekt lädt. Das Problem besteht darin, dass zwei Anfragen eingehen und die erste fehlschlägt. diese

zu lösen, wir sollten ng-src verwenden, die eine Winkel Richtlinie und Winkel werden ng-src Wert in Attribut src nur ersetzen, nachdem Winkel Bootstrapping und Controller vollständig geladen werden, und zu diesem Zeitpunkt {{hash}} wäre schon mit dem richtigen Umfang ersetzt wurde, Wert.

Answer 3

Die src="{{phone.imageUrl}}" ist nicht erforderlich und erstellt eine zusätzliche Anforderung durch den Browser.Der Browser wird mindestens 2 GET Anfragen machen versucht, das Bild zu laden:

1. vor dem Ausdruck ausgewertet wird {{phone.imageUrl}}
2. nach dem Ausdruck img/phones/motorola-xoom.0.jpg

Sie ausgewertet wird immer ng-src Direktive verwenden sollten beim Umgang mit eckigen Ausdrücken. <img ng-src="{{phone.imageUrl}}"> gibt Ihnen das erwartete Ergebnis einer einzelnen Anfrage.

---

Auf einer seitlichen Anmerkung, das gleiche gilt für ng-href so erhalten Sie nicht defekte Links, bis die ersten in verdauen Zyklus Kicks.

Answer 4

Nun, es 100% tatsächlich Sinn macht, weil HTML verarbeitet wird sequentiell und wenn diese HTML-Seite zeilenweise bearbeitet wird, ist die phone.imageUrl noch nicht definiert, bis sie zu diesem Bild, der Zeile und dem Bild kommt.

Tatsächlich hat Angular JS dieses Stück HTML noch nicht verarbeitet und hat diese Platzhalter noch nicht gesucht und ersetzt diese Ausdrücke mit den Werten. Was am Ende passiert, ist, dass der Browser diese Zeile erhält und versucht, dieses Bild unter dieser URL abzurufen.

Und natürlich ist dies eine gefälschte URL, wenn es immer noch diesen Schnurrbart und geschweifte Klammern enthält, und deshalb gibt es Ihnen eine 404, aber sobald natürlich Angular dies übernimmt, ersetzt es diese URL für die richtige Eins, und dann sehen wir immer noch das Bild, aber die 404 Fehlermeldung bleibt in unserer Konsole.

Also, wie können wir uns darum kümmern? Nun, wir können das nicht mit normalen HTML-Tricks erledigen. Aber wir können uns mit Angular darum kümmern. Wir müssen dem Browser irgendwie mitteilen, dass er nicht versuchen soll, diese URL zu holen, sondern sie nur dann holen, wenn Angular bereit ist, diese Platzhalter zu interpretieren.

Nun, ein Weg, dies zu tun ist, ein Angular-Attribut anstelle des Standard-HTML-Attributs hier anzubringen. Und das Angular-Attribut ist nur . Wenn wir das jetzt sagen, gehen Sie zurück, Sie werden sehen, dass es keine Fehler mehr gibt, weil das Bild nur abgerufen wurde, sobald Angular diesen HTML-Code in die Hand genommen und alle Ausdrücke in ihre Werte übersetzt hat.