angularjs: ng-src background-image:url(...)에 상당합니다.

angularjs: ng-src background-image:url(...)에 상당합니다.

angularjs에는 태그 ng-src가 있습니다.이 태그는 angularjs가 그 사이에 배치되어 있는 변수를 평가하기 전에 비활성 url에 대한 오류를 수신하지 않는 것을 목적으로 합니다.{{ ★★★★★★★★★★★★★★★★★」}}.

를 DIV와 가 꽤 것입니다.background-imageurl로 합니다.의 뛰어난 CSS3가 입니다.background-sizeDIV를 사용하다

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

하게 쓸 .{{"style='background-image:url(myVariableUrl)'"}}'이렇게'는요.

많이 찾아봤지만 제대로 된 방법을 찾을 수가 없어요.이 모든 오류로 인해 내 앱이 엉망진창이 되어가고 있다.

이거면 돼

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

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/

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

, 러, 러, 러, 도, 도, 도, it, it, it, it, it, it, it, it, it, it, it, it, it, it.ng-style:

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

존재하지 않는 이미지의 취득을 시도하지 않습니다.

보간만 있으면 후블리의 대답과 비슷해

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

여기에 더 많은 배경이 있다: 각진JS : $observe 메서드와 $watch 메서드의 차이

@jaime 네 대답은 괜찮아.하지만 페이지에 $http가 있는 경우.그러면 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}}">

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

말씀하신 대로ng-src이미지를 로드하기 전에 페이지가 렌더링을 완료하기를 원하는 경우 브라우저가 렌더링을 완료한 후 네이티브 디렉티브를 실행하도록 jaime의 답변을 수정할 수 있습니다.

이 블로그 투고에서는, 이것에 대해 꽤 잘 설명하고 있습니다.본질적으로, 다음의 용지를 삽입해 주세요.window.setTimeout콜백 기능을 사용하기 전에 CSS를 변경합니다.

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