В angularjs у вас есть тег ng-src , цель которого состоит в том, чтобы вы не получили ошибку для недействительного URL-адреса до того, как angularjs оценит переменные, расположенные между {{
и }}
.
Проблема в том, что я использую довольно много DIV с background-image
установленным на URL. Я делаю это из-за превосходного свойства CSS3, background-size
которое обрезает изображение до точного размера DIV.
Единственная проблема заключается в том, что я получаю много ошибок по той же причине, по которой они создали тег ng-src: у меня есть несколько переменных в URL, и браузер считает, что изображение не существует.
Я понимаю, что есть возможность написать грубое {{"style='background-image:url(myVariableUrl)'"}}
, но это кажется «грязным».
Я много искал и не могу найти правильный способ сделать это. Мое приложение становится беспорядком из-за всех этих ошибок.
Этот работает для меня
источник
imgURL
не установленным и повторяет попытку, когдаimgURL
будет установлено.Приведенный выше ответ не поддерживает наблюдаемую интерполяцию (и затрачивает много времени на отладку). Ссылка jsFiddle в @BrandonTilley комментарий был ответ , который работал на меня, что я снова пост здесь для сохранения:
Пример использования контроллера и шаблона
Контроллер:
Шаблон:
Используйте в шаблоне так:
или так:
источник
Также возможно сделать что-то подобное с
ng-style
:который не будет пытаться получить несуществующее изображение.
источник
Подобно ответу Хублея, только с интерполяцией:
источник
<span ng-style="{'background-image': 'url(/styles/images/profile.png)'}" style="background-image: url("");"></span>
. Подход @hooblei сработал.просто дело вкуса, но если вы предпочитаете обращаться к переменной или функции напрямую, как это:
вместо интерполяции вот так:
тогда вы можете определить директиву немного по-другому, с
scope.$watch
которой будете обращаться$parse
к атрибутуздесь есть больше предыстории: AngularJS: Разница между методами $ наблюдений и $ наблюдений
источник
@ Возможно, ваш ответ в порядке. Но если на вашей странице есть $ http.get, вы должны использовать ng-if
на заводе
в области контроллера
и представление, если вы используете ng-if, как показано ниже, тогда вы получите изображение путем интерполяции, иначе вы не сможете получить изображение, потому что директива получает значение до HTTP-запроса.
источник
Я обнаружил, что с 1.5 компонентами абстрагирование стиля от DOM работает лучше всего в моей асинхронной ситуации.
Пример:
А в контроллере что-то нравится так:
источник
Так как вы упомянули,
ng-src
и кажется, что вы хотите, чтобы страница завершила рендеринг перед загрузкой вашего изображения, вы можете изменить ответ jaime, чтобы запускать нативную директиву после того, как браузер завершит рендеринг.Этот пост в блоге объясняет это довольно хорошо; по существу, вы вставляете
$timeout
обертку дляwindow.setTimeout
перед функцией обратного вызова , в котором вы делаете эти изменения в CSS.источник