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

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

and the view if you use the ng-if like below then you will get the image by interpolation otherwise, you can't get the image because directive get the value before HTTP request.

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

---

I've found with 1.5 components that abstracting the styling from the DOM to work best in my async situation.

Example:

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

And in the controller, something likes this:

this.$onChanges = onChanges;

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

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

---

Since you mentioned ng-src and it seems as though you want the page to finish rendering before loading your image, you may modify jaime's answer to run the native directive after the browser finishes rendering.

This blog post explains this pretty well; essentially, you insert the $timeout wrapper for window.setTimeout before the callback function wherein you make those modifications to the CSS.

참고URL : https://stackoverflow.com/questions/13781685/angularjs-ng-src-equivalent-for-background-imageurl