AngularJS指令修改URL

在我的模板，我能夠使用AngularJS指令修改URL

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之間？

來源

2016-05-15 medoix

與您的「{{}}」表達式...控制器功能或自定義過濾器結合使用的許多方法是想到的兩個方法。例如'{{getImage（f.flower.imageURL）}}'。然後使用另一個變量來切換大小條件 – charlietfl

根據你的例子，我不認爲你需要一個指令。只需將一個功能添加到您的控制器。取而代之的

ng-style="{'background-image':'url({{f.flower.imageURL}})'}"

做

ng-style="{'background-image':'url({{generateImageUrl(f.flower.imageURL, 320)}})'}"

而且您的控制器將有標準的JavaScript來操縱網址：

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來防止瀏覽器在啓動angular之前請求url。

來源

2016-05-15 04:03:43 pgreen2

AngularJS指令修改URL

回答

相關問題