如何在 Angular 的样式标签中格式化 URL?
Posted
技术标签:
【中文标题】如何在 Angular 的样式标签中格式化 URL?【英文标题】:How to format a URL within a style tag in Angular? 【发布时间】:2016-11-27 16:33:20 【问题描述】:我正在尝试在 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)"
我是否遗漏了一些明显的东西?感谢您的帮助!
【问题讨论】:
【参考方案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>
【讨论】:
当基础值更新时会更新吗?我假设可更新的值需要在它们自己的双括号中。 另一个问题:我需要在第二个表达式中添加一个过滤器。应该是 slides.currentSlide|myFilter。使用单大括号语法看起来如何? 我写回复的时候还没有真正尝试过。它工作得很好!也感谢您对过滤器的更新。我不喜欢以这种方式更改为更具命令性的模型。我原来的做法似乎更合乎逻辑。有没有简单的方法来逃避&符号所以Angular不会抱怨?如果没有,你的方法很完美。非常感谢您的帮助!以上是关于如何在 Angular 的样式标签中格式化 URL?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 `angular.json` 中配置内联样式和 html 模板?