Как отформатировать URL-адрес в теге стиля в Angular?

Question

Я пытаюсь сделать эффект слайд-шоу в Угловом, и у меня есть div с тегом style (с использованием 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>