模板內的變量不計算

我有玉的標記看起來像這樣：模板內的變量不計算

li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") 
    .parcel-image(style="background-image:url({{parcel.image}});")

出於某種原因，有時我得到404錯誤，而它試圖獲取http://localhost:3501/%7B%7Bparcel.image%7D%7D，它不發生的事情，但有時。儘管所有圖像都正在檢索並正確顯示在頁面上。這裏有什麼問題？

來源

2013-02-15 Sergei Basharov

'風格=「背景圖像：網址（{{parcel.image}}） ;'不關閉 – iMom0 2013-02-15 12:34:55

@ iMom0，這裏只是一個拼寫錯誤，修正了，謝謝。在源代碼中沒有問題。 – 2013-02-15 12:39:45

http://localhost:3501/%7B%7Bparcel.image%7D%7D是http://localhost:3501/{{parcel.image}}

記住，HTML實際上是在DOM時的角度進行編譯。因此，您的瀏覽器（對於一個短暫的時刻，應用程序白手起家之前），其在DOM是這樣的：

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

而當它看到的樣式屬性，它擊中/{{parcel.image}}您的服務器。

這就是爲什麼你偶爾會遇到404。

編輯：您可以使用the ngStyle directive來解決這個問題：

的ngStyle指令將觀看對象，並將其應用於包含樣式。

因此，在你的HTML：

<div class="parcel-image" ng-style="styles">...</div>

而在你的控制器：

app.controller('ParcelImageController', function($scope) { 
    $scope.parcel = {/*some object*/}; 
    $scope.style = { 
    'background-image': 'url(' + $scope.parcel.image + ')' 
    }; 
});

Here a fiddle with an example of this in action.

來源

2013-02-15 17:43:41 satchmorun

感謝您的解釋。現在，我如何解決這個問題在大多數情況下行事快捷方式？我想，我將{{parcel.image}}值放入另一個屬性中，比如data-image =「{{parcel-image}}」，那麼如何在角度載入所有值時更好地將style屬性與相應的值相加內部的東西和範圍？ – 2013-02-18 10:57:19

再次查看我的答案 - 我添加了一個解決方案。 – satchmorun 2013-02-18 18:03:59

模板內的變量不計算

回答

相關問題