Почему {{}} не работает в атрибутах src? Зачем мне нужен ngSrc?

это работает:

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

но это не так:

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

нужно использовать ngSrc вместо. Могу я узнать, почему это так? У меня была аналогичная проблема с получением " src "(или это был "href"? Не помню) работать в руле.js и отказался от него (давление для доставки).

Это распространенная проблема браузера или что-то подобное?

6
angularjs

2 ответов

продление ответа выше меня, в то время как

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

работает, это не лучшая практика при динамическом создании ссылок с помощью Angular. Каждый раз, когда вы используете привязку данных в теге привязки, вы должны использовать директиву ng-href. Таким образом, код для тега привязки должен выглядеть так:

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

прямо из документации Angular:

использование угловой разметки, как в атрибуте href, делает страницу открытой на неправильный URL-адрес, если пользователь нажимает эту ссылку прежде чем angular сможет заменить фактический URL-адрес, ссылка будет сломана и, скорее всего, вернет ошибку 404. Директива ngHref решает эту проблему.

это помогает нам понять ng-src: так с

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

браузер пытается загрузить изображение, но Angular еще не заменил заключенное в скобки выражение в src, поэтому изображение не загружается. Используя

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

вы говорите браузеру ждать, чтобы загрузить изображение, пока заключенное в квадратные скобки выражение заполнено, что позволяет загрузить правильное изображение.

13

на документация упоминаю об этом

использование угловой разметки, такой как {{hash}} в атрибуте src, не работает справа: браузер будет извлекать из URL-адреса с буквальным текстом {{hash}} пока Angular не заменит выражение внутри {{hash}}. Этот директива ngSrc решает эту проблему.

Если вы тщательно подумаете, привязка данных javascript к вашему html происходит после загрузки html DOM, поэтому браузеры видят intial src как {{url}} скорее, что допустимая строка url и не выполняется.

4