在我的模板中，我能够使用
ng-style="{'background-image':'url({{f.flower.imageURL}})'}"
imageURL始终返回具有URL的高分辨率图像，例如
https://s3.amazonaws.com/images/FlowerImages/Rose_1920.jpg
但是，端点还具有较小的图像，例如
https://s3.amazonaws.com/images/FlowerImages/Rose_320.jpg
https://s3.amazonaws.com/images/FlowerImages/Rose_480.jpg
https://s3.amazonaws.com/images/FlowerImages/Rose_1024.jpg
我将如何创建指令以遍历URL直至下划线并传递我想要的大小（取决于视图）以在下划线和.jpg之间进行更新？
根据您的示例，我认为您不需要指令。只需向您的控制器添加一个功能即可。
代替
ng-style="{'background-image':'url({{f.flower.imageURL}})'}"
做
ng-style="{'background-image':'url({{generateImageUrl(f.flower.imageURL, 320)}})'}"
并且您的控制器将具有标准的javascript来操纵url：
function generateImageUrl(url, size) {
var n = url.lastIndexOf("_");
var beforeUnderscore = url.substring(0, n);
var afterUnderscore = url.substring(n+1);
var suffix = afterUnderscore.split('.')[1];
return beforeUnderscore + "_" + size + "." + suffix;
}
同样的功能也适用于图像
<img ng-src="{{generateImageUrl(f.flower.imageURL, 320)}}">
注意：ng-src用于代替src启动角度引导之前阻止浏览器请求URL。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句