[AngularJS] Style, ng-style和天殺的IE

收到了一個IE 10會看不到圖片的bug, 昨天看了半天, 本以為在IE10沒正確載入遠端的資料(後來覺得我怎會蠢到這麼想), debug了半天(IE 10也沒很好的tool), 結果後來發現完全不是這麼一回事, 原本的code是這樣的:

<div style="background-image: url({{mydata.getImageUrl()}})"></div>

一開始也沒想到這邊, 看起來都沒問題, 但後來下面這樣的並沒問題:

<img src="{{mydata.getImageUrl()}}"/>

才發現原來AngularJS在IE10底下, 在style裡用{{變數}}會有問題, 解決的方法是要改用ng-style, 例如

<div ng-style="mydata.backgroundStyle()"></div>

而這裡的backgroundStyle是這樣的(不是string喔)

backgroundStyle = function() {
    return {
        backgroundImage: this.getImageUrl()
    }
}

from Tumblr http://ift.tt/1cFDiId

via IFTTT