Question

我有一个Angular 1.0.7 webapp，它使用Angular-UI 0.6.0来显示轮播。

我们正在重新设计我们的网站以改善用户体验。因此，设计师建议更新图像的显示方式。建议使用带有background-url的ng-style属性而不是使用img标记。

此代码适用于我们（因为它只使用样式属性）：

<carousel interval="8000">
            <slide style="background-image:url('img/carrusel1.jpg');">
                <div class="container">
                    <div class="carousel-caption" ng-cloak>
                        <h1 class="custom-page-header-2">{{'CARROUSEL_TITLE_1' | translate}}</h1>
                        <h2 class="lead">{{'CARROUSEL_CONTENT_1' | translate}}</h2>             
                    </div>
                  </div>
            </slide>

然而，这个带有ng-style的（因为我们需要Angular代码）对我们不起作用：

<carousel interval="-10">
                            <slide ng-repeat="i in inspiration.picturesList" ng-style="{'background-image': 'url(//' + {{S3_BUCKET}} + '.' + {{PHOTO_SERVER_URL}} + '/img/inspiration/ibiza/inspiration-ibiza-1.jpg)'}">
                        </slide>
</carousel>

更新根据评论，我做了一些更新。

正如我所说，如果我只使用ng-style，无论是使用上面提出的格式还是评论中提出的格式，我都会收到此错误：

Error: Syntax Error: Token ':' is an unexpected token at column 19 of the expression ['background-image': 'url(//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}} + {{inspiration.name}}/inspiration-{{inspiration.name}}-{{i}}.jpg)'] starting at [: 'url(//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}} + {{inspiration.name}}/inspiration-{{inspiration.name}}-{{i}}.jpg)'].

ng-attr-style错误消失了。但是，当我检查代码时，我没有得到预期的结果：
```
  ng-attr-style="'background-image': 'url(//. + /inspiration--.jpg)'"
```

看起来它没有运行Angular代码。

这是代码：

 <carousel interval="-10">
                                <slide ng-repeat="i in inspiration.picturesList" ng-attr-style="'background-image': 'url(//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}} + {{inspiration.name}}/inspiration-{{inspiration.name}}-{{i}}.jpg)'">

Answer 1

我刚刚遇到了同样的问题（uib-bar和ng-style没有合作）。问题是angular-ui指令在其模板内部使用ng-style，并且显然有角度不能很好地处理多个ng-style指令：它只是附加了无法工作的内容。 / p>

你几乎得到了解决方案。关键是使用ng-attr-style，但它希望其输入为文本（可选地带有{{..}}表达式），无需进一步引用。这对我有用：

ng-attr-style="background-color: {{colors[$index % colors.length]}}"

这应该可以解决你的问题：

<slide ng-repeat="i in inspiration.picturesList"
       ng-attr-style="background-image: url(//{{S3_BUCKET}}{{PHOTO_SERVER_URL}}{{inspiration.name}}/inspiration-{{inspiration.name}}-{{i}}.jpg)">

确保您的{{S3_BUCKET}}，{{inspiration.name}}，...变量在本地范围内正确定义（ng-repeat内）。

Answer 2

尝试使用ng-attr-style 看看：https://github.com/angular/angular.js/issues/2186#issuecomment-68032290

Answer 3

ng-style="{'background-image': 'url(//' + {{S3_BUCKET}} + '.' + {{PHOTO_SERVER_URL}} + '/img/inspiration/ibiza/inspiration-ibiza-1.jpg)'}"

=＆GT;

ng-style="{'background-image': 'url(//{{PHOTO_SERVER_URL}}.{{PHOTO_SERVER_URL}}/img/inspiration/ibiza/inspiration-ibiza-1.jpg)'}"

{{}}无需引用与＆＃39; +＆＃39;

分开

我认为如果可能的话，html很简单，特别是angularjs。（因为有很多属性）

所以在js代码中

 #coffeescript
 $scope.bg_style = {'background-image':'url('+IMAGE_URL+')}

 #if array with image url
 for i in $scope.images
   i.bg_style = {'background-image':'url('+i.url+')}

AngularJs ng-style无法使用Angular-UI 0.6.0轮播

3 个答案: