angularjs : background-image : url (…)에 해당하는 ng-src

angularjs에는 ng-src 태그 가 있는데 angularjs가 {{and 사이에있는 변수를 평가하기 전에 유효하지 않은 URL에 대한 오류를받지 않습니다 }}.

문제는 background-imageURL 로 설정된 꽤 많은 DIV를 사용한다는 것 입니다. background-size이미지를 DIV의 정확한 크기로 자르는 뛰어난 CSS3 속성 으로 인해이 작업을 수행합니다 .

유일한 문제는 ng-src 태그를 만든 것과 동일한 이유로 많은 오류가 발생한다는 것입니다 .URL에 변수가 있고 브라우저가 이미지가 존재하지 않는다고 생각합니다.

나는 원유를 쓸 가능성이 있다는 것을 알고 {{"style='background-image:url(myVariableUrl)'"}}있지만 이것은 '더러운'것 같습니다.

많은 것을 검색했는데 올바른 방법을 찾을 수 없습니다. 이 모든 오류로 인해 앱이 엉망이되었습니다.

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/

이것은 나를 위해 작동

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

위의 답변은 관찰 가능한 보간을 지원하지 않습니다 (그리고 디버깅하는 데 많은 시간이 걸렸습니다). @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>

다음과 같이 할 수도 있습니다 ng-style:

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

존재하지 않는 이미지를 가져 오려고 시도하지 않습니다.

보간법을 사용한 hooblei의 답변과 유사합니다.

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

맛의 문제이지만 다음과 같이 변수 또는 함수에 직접 액세스하는 것을 선호하는 경우 :

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

다음과 같이 보간하는 대신 :

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

당신은 다르게와 지시어 비트를 정의 할 수있다 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 메소드의 차이점

@ 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}}">

내 비동기 상황에서 가장 잘 작동하도록 DOM의 스타일을 추상화하는 1.5 구성 요소를 찾았습니다.

예:

<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 + ')';
}

앞에서 언급 한 ng-src것처럼 이미지를로드하기 전에 페이지 렌더링을 마치려는 것처럼 보이기 때문에 브라우저 렌더링이 완료된 후 기본 지시문을 실행하도록 jaime의 답변을 수정할 수 있습니다 .

이 블로그 게시물은 이것을 잘 설명합니다. 기본적으로 CSS를 수정하는 콜백 함수 앞에 $timeout래퍼 를 삽입합니다 window.setTimeout.