angularjs ng-style: фоновое изображение не работает

Я пытаюсь применить фоновое изображение к div с помощью углового ng-style (Я пробовал пользовательскую директиву раньше с тем же поведением ), но она, похоже, не работает.

<nav
    class="navigation-grid-container"
    data-ng-class="{ bigger: isNavActive == true }"
    data-ng-controller="NavigationCtrl"
    data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true"
    data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false"
    data-ng-show="$parent.navInvisible == false"
    data-ng-animate="'fade'"
    ng-cloak>

    <ul class="navigation-container unstyled clearfix">
        <li
            class="navigation-item-container"
            data-ng-repeat="(key, item) in navigation"
            data-ng-class="{ small: $parent.isNavActive, big: isActive == true }"
            data-ng-mouseenter="isActive = true; isInactive= false"
            data-ng-mouseleave="isActive = false; isInactive= true">

            <div data-ng-switch on="item.id">

                <div class="navigation-item-default" data-ng-switch-when="scandinavia">
                    <a class="navigation-item-overlay" data-ng-href="{{item.id}}">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }">{{item.teaser}}</span>
                        </div>
                    </a>
                    <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span>
                </div>

                <div class="navigation-item-last" data-ng-switch-when="static">
                    <div class="navigation-item-overlay">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text">
                                <img data-ng-src="{{item.teaser}}">
                            </span>
                        </div>
                    </div>
                    <span class="navigation-item-background">
                        <img class="logo" data-ng-src="{{item.images.logo}}">
                    </span>
                </div>

                <div class="navigation-item-default" data-ng-switch-default>
                    <a class="navigation-item-overlay" data-ng-href="{{item.id}}">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text">{{item.teaser}}</span>
                        </div>
                    </a>
                    <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span>
                </div>

            </div>
        </li>
    </ul>
</nav>

хотя, если я попробую цвет фона, он, кажется, работает нормально. Я попробовал удаленный источник и локальный источник тоже http://lorempixel.com/g/400/200/sports/, ни один не работал.

7 74
javascript angularjs angularjs-ng-repeat coding-style angularjs-directive

7 ответов:

синтаксис background-image - это:

background-image: url("path_to_image");

правильный синтаксис для ng-стиля:

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">
102

можно анализировать динамические значения в несколько способов.

интерполяция с двойными фигурными скобками:

ng-style="{'background-image':'url({{myBackgroundUrl}})'}"

конкатенации строк:

ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}"

литералы шаблона ES6:

ng-style="{'background-image': `url(${myBackgroundUrl})`}"
172

Если у вас есть данные, вы ждете возвращения сервера (item.id) и есть такая конструкция:

ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}"

убедитесь, что вы добавляете что-то вроде ng-if="item.id"

в противном случае у вас будет либо два запроса, либо один неисправный.

15

для тех, кто изо всех сил пытается получить эту работу с IE11

HTML

<div ng-style="getBackgroundStyle(imagepath)"></div>

JS

$scope.getBackgroundStyle = function(imagepath){
    return {
        'background-image':'url(' + imagepath + ')'
    }
}
10

это работает для меня, фигурные скобки не требуются.

ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}"

уведомления.значок здесь-переменная области.

1

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

допустим, у нас есть функция getImage() в нашем контроллере. Этот функция возвращает строку в формате, подобном этому: url (icons / pen.формат PNG.) Если мы это сделаем, объявление ngStyle указывается точно так же, как и раньше:

ng-style="{ 'background-image': getImage() }"

Не забудьте поставить кавычки вокруг background-имя ключа изображения. Помните, что это должно быть отформатировано как допустимый ключ объекта Javascript.

1

только для записей вы также можете определить свой объект в контроллере следующим образом:

this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' };

и затем вы можете определить функцию для изменения свойства объекта напрямую:

this.changeBackgroundImage = function (){
        this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')';
    }

делать это таким образом, вы можете динамически изменять свой стиль.

0