angularjs: ng-src эквивалент для background-image: url (…)

В angularjs у вас есть тег ng-src , целью которого является то, что вы не получите ошибку для недопустимого URL-адреса до того, как angularjs получит оценку переменных, помещенных между {{ и }} .

Проблема в том, что я использую довольно некоторые DIV с background-image установленным на url. Я делаю это из-за отличного background-size CSS3, который обрезает изображение с точным размером DIV.

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

Я понимаю, что есть возможность написать грубую {{"style='background-image:url(myVariableUrl)'"}} , но это кажется «грязным».

Я много искал и не могу найти правильный способ сделать это. Из-за всех этих ошибок мое приложение становится беспорядочным.

ngSrc – это родная директива, поэтому, похоже, вам нужна аналогичная директива, которая изменяет стиль background-image вашего div.

Вы можете написать свою собственную директиву, которая делает именно то, что вы хотите. Например

 app.directive('backImg', function(){ return function(scope, element, attrs){ var url = attrs.backImg; element.css({ 'background-image': 'url(' + url +')', 'background-size' : 'cover' }); }; });​ 

Который вы бы вызвали так

 

JSFiddle с симпатичными кошками в качестве бонуса: http://jsfiddle.net/jaimem/aSjwk/1/

Это работает для меня

 
  • ...
  • Вышеупомянутый ответ не поддерживает наблюдаемую интерполяцию (и стоило мне много времени на отладку). Ссылка jsFiddle в комментарии @BrandonTilley была ответом, который сработал для меня, и я снова отправлю его для сохранения:

     app.directive('backImg', function(){ return function(scope, element, attrs){ attrs.$observe('backImg', function(value) { element.css({ 'background-image': 'url(' + value +')', 'background-size' : 'cover' }); }); }; }); 

    Пример использования controllerа и шаблона

    Контроллер:

     $scope.someID = ...; /* The advantage of using directive will also work inside an ng-repeat : someID can be inside an array of ID's */ $scope.arrayOfIDs = [0,1,2,3]; 

    Шаблон:

    Используйте в шаблоне следующим образом:

     

    или так:

     

    Также можно сделать что-то подобное с ng-style :

     ng-style="image_path != '' && {'background-image':'url('+image_path+')'}" 

    который не попытался бы получить несуществующий образ.

    Подобно тому, как ответил Хооблей, просто с интерполяцией:

     
  • ...
  • просто вопрос вкуса, но если вы предпочитаете доступ к переменной или функции прямо следующим образом:

     

    вместо интерполяции следующим образом:

     

    то вы можете определить директиву по-разному с scope.$watch который будет $parse по атрибуту

     angular.module('myApp', []) .directive('bgImage', function(){ return function(scope, element, attrs) { scope.$watch(attrs.bgImage, function(value) { element.css({ 'background-image': 'url(' + value +')', 'background-size' : 'cover' }); }); }; }) 

    здесь есть больше информации об этом: AngularJS: Разница между методами $ observ и $ watch

    @jaime, ваш ответ в порядке. Но если ваша страница имеет $ http.get, тогда вы используете ng-if

     app.directive('backImg', function(){ return function($scope, $element, $attrs){ var url = $attrs.backImg; $element.css({ 'background-image': 'url(' + url + ')', 'background-size': 'cover' }); } }); 

    на заводе

     app.factory('dataFactory', function($http){ var factory = {}; factory.getAboutData = function(){ return $http.get("api/about-data.json"); }; return factory; }); 

    в области controllerа

     app.controller('aboutCtrl', function($scope, $http, dataFactory){ $scope.aboutData = []; dataFactory.getAboutData().then(function(response){ // get full home data $scope.aboutData = response.data; // banner data $scope.banner = { "image": $scope.aboutData.bannerImage, "text": $scope.aboutData.bannerText }; }); }); 

    и представление, если вы используете ng-if, как показано ниже, вы получите изображение путем интерполяции в противном случае, вы не сможете получить изображение, потому что директива получает значение перед HTTP-запросом.

     

    Я нашел с 1.5 компонентами, которые абстрагируют стиль от DOM, чтобы лучше работать в моей асинхронной ситуации.

    Пример:

     

    А в controllerе что-то нравится:

     this.$onChanges = onChanges; function onChanges(changes) { if (changes.value.currentValue){ $ctrl.backgroundUrl = setBackgroundUrl(changes.value.currentValue); } } function setBackgroundUrl(value){ return 'url(' + value.imgUrl + ')'; } 

    Поскольку вы упомянули ng-src и кажется, что вы хотите, чтобы страница закончила рендеринг перед загрузкой изображения, вы можете изменить ответ jaime для запуска директивы native после того, как браузер завершит рендеринг.

    Это сообщение в блоге объясняет это довольно хорошо; По сути, вы вставляете $timeout wrapper для window.setTimeout перед функцией обратного вызова, в которой вы вносите эти изменения в CSS.

  • Создайте сетку масонства с помощью flexbox (или другого CSS)
  • Как вертикально центрировать контент с переменной высотой в div?
  • Связь между важными и спецификациями CSS
  • Как включить стиль CSS при преобразовании svg в png
  • Двухцветный фон, разделенный диагональной линией, используя css
  • Шрифты выглядят по-разному в Firefox и Chrome
  • Как сделать мигающий / мигающий текст с помощью CSS 3?
  • Почему браузеры создают префиксы поставщиков для свойств CSS?
  • Привязать событие к щелчку правой кнопкой мыши
  • Фиксированный элемент исчезает в Chrome
  • Как получить «положение: исправлено» css для работы в IE 7+ с TRANSITIONAL doctype?
  • Давайте будем гением компьютера.