javascript - 如何在 Angular 的样式标签中格式化 URL？

Question

我正在尝试在 Angular 中制作幻灯片效果，我有一个带有 style 标签的 div(使用 ng-style ) 与 background-image。

URL 包含符号，这每次都会给我一个 parse:lexerr 错误。我试过转义它们(&)或直接转义(&)，但无论哪种方式都是同样的错误。该指令如下所示:

<div class="responsive-image" ng-style="background-image:url({{service.blobHost}}/{{slides.currentSlide}})">

错误如下:

Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 133-133 [&] in expression [background-image:url(https://WWW.HOST.COM/cloud/user-media-32/0604338b-529a-4c42-8f6d-823978327352.jpg?mode=max&scale=both&maxwidth=1280&maxheight=697)].
http://errors.angularjs.org/1.5.3/$parse/lexerr?p0=Unexpected%20next%20character%20&p1=s%20133-133%20%5B%26%5D&p2=background-image%3Aurl(https%3A%2F%2FWWW.HOST.COM%2Fcloud%2Fuser-media-32%2F0604338b-529a-4c42-8f6d-823978327352.jpg%3Fmode%3Dmax%26scale%3Dboth%26maxwidth%3D1280%26maxheight%3D697)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13438:12
    at Lexer.throwError (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27016:11)
    at Lexer.lex (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:26975:16)
    at Object.AST.ast (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27139:30)
    at Object.ASTCompiler.compile (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27592:3


Error: [$parse:lexerr] Lexer Error: Unexpected next character  at columns 133-133 [&] in expression [background-image:url(https://WWW.HOST.COM/cloud/user-media-32/0604338b-529a-4c42-8f6d-823978327352.jpg?mode=max&scale=both&maxwidth=1280&maxheight=697)].
http://errors.angularjs.org/1.5.3/$parse/lexerr?p0=Unexpected%20next%20character%20&p1=s%20133-133%20%5B%26%5D&p2=background-image%3Aurl(https%3A%2F%2FWWW.HOST.COM%2Fcloud%2Fuser-media-32%2F0604338b-529a-4c42-8f6d-823978327352.jpg%3Fmode%3Dmax%26scale%3Dboth%26maxwidth%3D1280%26maxheight%3D697)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:13438:12
    at Lexer.throwError (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27016:11)
    at Lexer.lex (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:26975:16)
    at Object.AST.ast (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27139:30)
    at Object.ASTCompiler.compile (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:27592:31)
    at Parser.parse (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:28479:29)
    at $parse (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:28610:39)
    at Scope.$watch (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:29823:19)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:42629:9
    at invokeLinkFn (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:22993:9)"

我是否遗漏了一些明显的东西？感谢您的帮助!

Answer 1

给你:

<div class="responsive-image"
    ng-style="{'background-image': 'url(' + service.blobHost + '/' + slides.currentSlide + ')'}"></div>

这是过滤器的一个例子。 “更改幻灯片”将回答您的第一个问题(在评论中)，即值将更改以及应用过滤器的方式。

var app = angular.module("sa", []);

app.controller("FooController", function($scope, $filter) {

  $scope.service = {
    blobHost: 'https://pixabay.com/static/uploads/photo'
  };

  $scope.slides = {
    currentSlide: '2016/04/19/06/03/mercedes-1338063__340'
  };

  $scope.changeSlide = function() {
    $scope.slides.currentSlide = '2016/07/02/22/42/berries-1493905_640'
  };

  $scope.applyFilter = function(value) {
    return $filter('myFilter')(value)
  }
});

app.filter('myFilter', function() {
  return function(value) {
    return value + '.jpg';
  }
});

.responsive-image {
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="FooController">
  <a href="" ng-click="changeSlide()">Change slide</a>
  <br>

  <div class="responsive-image" ng-style="{'background-image': 'url(' + service.blobHost + '/' + applyFilter(slides.currentSlide) + ')'}"></div>
</div>