Question

我正在尝试使用角度ng-style将背景图像应用于div（之前我尝试过使用相同行为的自定义指令），但它似乎无法正常工作。

<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/，但都没有工作。

Answer 1

可以通过几种方式解析动态值。

使用双花括号插值：

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

字符串连接：

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

ES6模板文字：

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

Answer 2

background-image的正确语法是：

background-image: url("path_to_image");

ng-style的正确语法是：

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

Answer 3

如果你有数据，你正在等待服务器返回（item.id）并有一个这样的结构：

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

确保添加ng-if="item.id"

之类的内容

否则你会有两个请求或一个有问题。

Answer 4

对于那些努力使用IE11的人来说

<强> HTML

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

<强> JS

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

Answer 5

这对我有用，不需要花括号。

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

notification.icon这里是范围变量。

Answer 6

如果我们有动态值需要进入css背景或   background-image属性，它可能有点棘手   指定。

假设我们的控制器中有一个getImage（）函数。这个   函数返回一个类似于这样的字符串：   URL（图标/ pen.png）。如果我们这样做，则指定ngStyle声明   与以前完全相同：

DotGame:
;enter graphics mode
mov ax, 13h
int 10h
call SetCursor ; mouse input
call DotOne

cmp bx, 01 ; check if left mouse was clicked
je Check_X_Cords
 ;check if the player clicked the dot cords

Check_X_Cords:
cmp cx, [XCords1]
je Check_Y_Cords

Check_Y_Cords:
cmp dx, [YCords1]
je ScoreLabel

ScoreLabel:
inc [score]

确保在background-image键名称周围加上引号。请记住，必须将其格式化为有效的Javascript对象密钥。

Answer 7

只是为了记录，您还可以在控制器中定义您的对象，如下所示：

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

然后你可以定义一个函数来直接改变对象的属性：

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

这样做就可以修改你的风格。

Answer 8

Angular 2及更高版本的语法已更改：

const Day: FunctionComponent<DayProps> = ({ date, height, children }) => {
  const dispatch = useContext(State.DispatchContext)
  const [{ isOver, offset }, dropRef] = useDrop({
    // …uses the dispatch function within…
    // …
  })
  // …
}

angularjs ng-style：background-image不起作用

8 个答案: