angularjs：ng-src等效於background-image：url（...）

Question

在angularjs中，您有標記ng-src ，其目的是在angularjs評估位於{{和}}之間的變量之前，您不會收到無效URL的錯誤。

問題是我使用相當多的DIV並將background-image設置為網址。 我這樣做是因為優秀的CSS3屬性background-size將圖像裁剪為DIV的確切大小。

唯一的問題是我收到很多錯誤的原因與他們創建ng-src標簽的原因完全相同：我在url中有一些變量，瀏覽器認為圖像不存在。

我意識到有可能寫出粗略的{{"style='background-image:url(myVariableUrl)'"}} ，但這看起來很“臟”。

我搜索了很多，找不到正確的方法來做到這一點。 由於所有這些錯誤，我的應用程序變得一團糟。

Answer 1

這個對我有用

<li ng-style="{'background-image':'url(/static/'+imgURL+')'}">...</li>

Answer 2

ngSrc是一個原生指令，所以你似乎想要一個修改div的background-image樣式的類似指令。

您可以編寫自己的指令，完全按照您的意願執行操作。 例如

app.directive('backImg', function(){
    return function(scope, element, attrs){
        var url = attrs.backImg;
        element.css({
            'background-image': 'url(' + url +')',
            'background-size' : 'cover'
        });
    };
});​

您可以像這樣調用它

<div back-img="<some-image-url>" ></div>

JSFiddle與可愛的貓咪作為獎金： http ： //jsfiddle.net/jaimem/aSjwk/1/

Answer 3

上面的答案不支持可觀察的插值（並且我花了很多時間嘗試調試）。 @BrandonTilley評論中的jsFiddle鏈接是對我有用的答案，我將在此處重新發布以保存：

app.directive('backImg', function(){
    return function(scope, element, attrs){
        attrs.$observe('backImg', function(value) {
            element.css({
                'background-image': 'url(' + value +')',
                'background-size' : 'cover'
            });
        });
    };
});

---

使用控制器和模板的示例

控制器：

$scope.someID = ...;
/* 
The advantage of using directive will also work inside an ng-repeat :
someID can be inside an array of ID's 
*/

$scope.arrayOfIDs = [0,1,2,3];

模板：

在模板中使用如下：

<div back-img="img/service-sliders/{{someID}}/1.jpg"></div>

或者像這樣：

<div ng-repeat="someID in arrayOfIDs" back-img="img/service-sliders/{{someID}}/1.jpg"></div>

Answer 4

使用ng-style也可以做這樣的事情：

ng-style="image_path != '' && {'background-image':'url('+image_path+')'}"

它不會嘗試獲取不存在的圖像。

Answer 5

與hooblei的答案類似，只是插值：

<li ng-style="{'background-image': 'url({{ image.source }})'}">...</li>

Answer 6

只是一個品味問題，但如果您更喜歡直接訪問變量或函數，如下所示：

<div id="playlist-icon" back-img="playlist.icon">

而不是像這樣內插：

<div id="playlist-icon" back-img="{{playlist.icon}}">

然后你可以用scope.$watch來定義指令略有不同scope.$watch將對屬性進行$parse

angular.module('myApp', [])
.directive('bgImage', function(){

    return function(scope, element, attrs) {
        scope.$watch(attrs.bgImage, function(value) {
            element.css({
                'background-image': 'url(' + value +')',
                'background-size' : 'cover'
            });
        });
    };
})

這里有更多背景知識： AngularJS：$ observe和$ watch方法之間的區別

Answer 7

@jaime你的答案很好。 但是如果您的頁面有$ http.get，那么您已經使用了ng-if

app.directive('backImg', function(){
    return function($scope, $element, $attrs){
        var url = $attrs.backImg;
        $element.css({
            'background-image': 'url(' + url + ')',
            'background-size': 'cover'
        });
    }
});

在工廠里

app.factory('dataFactory', function($http){
    var factory = {};
    factory.getAboutData = function(){
        return $http.get("api/about-data.json");
    };
    return factory;
});

在控制器區域

app.controller('aboutCtrl', function($scope, $http, dataFactory){
    $scope.aboutData = [];
    dataFactory.getAboutData().then(function(response){
        // get full home data
        $scope.aboutData = response.data;
        // banner data
        $scope.banner = {
            "image": $scope.aboutData.bannerImage,
            "text": $scope.aboutData.bannerText
        };
    });
});

如果您使用下面的ng-if，那么您將通過插值獲得圖像，否則您將無法獲取圖像，因為指令在HTTP請求之前獲取值。

<div class="stat-banner"  ng-if="banner.image" background-image-directive="{{banner.image}}">

Answer 8

我發現有1.5個組件可以從DOM中抽象樣式，以便在我的異步情況下工作得最好。

例：

<div ng-style="{ 'background': $ctrl.backgroundUrl }"></div>

在控制器中，有類似的東西：

this.$onChanges = onChanges;

function onChanges(changes) {
    if (changes.value.currentValue){
        $ctrl.backgroundUrl = setBackgroundUrl(changes.value.currentValue);
    }
}

function setBackgroundUrl(value){
    return 'url(' + value.imgUrl + ')';
}

Answer 9

由於您提到了ng-src ，似乎您希望頁面在加載圖像之前完成渲染，因此您可以修改jaime的答案，以便在瀏覽器完成渲染后運行本機指令。

這篇博文很好地解釋了這一點; 實質上，您在回調函數之前插入了window.setTimeout的$timeout包裝器 ，其中您對CSS進行了這些修改。