angularjs: बैकग्राउंड-इमेज के लिए एनजी- src समकक्ष: url (…)


150

AngularJS में आप टैग एनजी-src जो उद्देश्य है कि आप से पहले AngularJS चर के बीच में रखा मूल्यांकन करने के लिए हो जाता है गलत यूआरएल के लिए एक त्रुटि प्राप्त नहीं होगी है {{और }}

समस्या यह है कि मैं एक background-imageसेट के साथ काफी कुछ DIV का उपयोग एक यूआरएल के लिए करता हूं । मैं उत्कृष्ट CSS3 की संपत्ति के कारण ऐसा करता हूं background-sizeजो छवि को DIV के सटीक आकार में क्रॉप करता है।

एकमात्र समस्या यह है कि मुझे एक ही कारण के लिए बहुत सी त्रुटियां प्राप्त होती हैं क्योंकि उन्होंने एनजी-एसकेजी टैग बनाया था: मेरे पास यूआरएल में कुछ चर हैं और ब्राउज़र को लगता है कि छवि मौजूद नहीं है।

मुझे एहसास है कि एक क्रूड लिखने की संभावना है {{"style='background-image:url(myVariableUrl)'"}}, लेकिन यह 'गंदा' लगता है।

मैंने बहुत खोज की है और ऐसा करने का सही तरीका नहीं खोज पाया। इन सभी त्रुटियों के कारण मेरा ऐप गड़बड़ हो रहा है।

जवाबों:


200

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/


67
बहुत अच्छा निर्देशन; एकमात्र समस्या यह है कि यह प्रक्षेप का समर्थन नहीं करता है। मैं संभवतः इसे इसी तरह संशोधित करूंगा: jsfiddle.net/BinaryMuse/aSjwk/2
मिशेल टायली

1
धन्यवाद, यह कोई फर्क नहीं पड़ता कि प्रक्षेप के बिना है, यह बिल्ली के बच्चे है!
विसेन स्केलोरू

यदि आप अविश्वसनीय स्रोतों से लोड कर रहे हैं तो इसके साथ कोई सुरक्षा मुद्दे?
आकिल फर्नांडीस

यह काम करता है, लेकिन केवल अगर आपकी छवि url पहले से ही परिभाषित है, तो @mythz उत्तर stackoverflow.com/a/15537359/1479680 का उपयोग बेहतर obeservable url करने के लिए करें
Magico

229

यह एक मेरे लिए काम करता है

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

22
मुझे लगता है कि यह स्वीकृत उत्तर होना चाहिए। कोई कस्टम निर्देश जोड़ने की आवश्यकता नहीं है।
जैकब लॉके मैडसेन

2
मैंने उसी के समान एक उत्तर जोड़ा, बस प्रक्षेप में उपयोग कर
wiherek

1
यह गंदा है, इस अर्थ में कि एक निर्देश सभी में फिट बैठता है, हर जगह आपको एक गतिशील पृष्ठभूमि की आवश्यकता होती है। यह उल्लेख किया गया प्रश्न कम पुन: प्रयोज्य लगा।
क्रिश्चियन बोनाटो

कोणीय 1.5.8 में काम नहीं करता है, यह अभी भी imgURLसेट नहीं होने पर छवि को लोड नहीं करने और फिर से लोड करने की कोशिश करता है imgURL
लेरॉयदेव

यह गलत है, अगर आपके URL में @% जैसे कोई विशेष चर हैं, तो यह टूट जाएगा।
efwjames

69

उपरोक्त उत्तर अवलोकनीय प्रक्षेप का समर्थन नहीं करता है (और मुझे डिबग करने में बहुत समय लगता है)। JsFiddle लिंक @BrandonTilley टिप्पणी में जवाब यह है कि मेरे लिए काम किया है, जो मैं संरक्षण के लिए फिर से पोस्ट करेंगे यहाँ था:

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>

40

इसके साथ कुछ ऐसा करना भी संभव है ng-style:

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

जो एक गैर-मौजूदा छवि लाने का प्रयास नहीं करेगा।


2
@sqren यह भी देखें कि क्या आप कोणीय (1.1.5 और ऊपर) के नए संस्करण का उपयोग कर रहे हैं: stackoverflow.com/a/12151492/1218080 । विचारों में एक वास्तविक टर्नरी ऑपरेटर के लिए समर्थन जोड़ा गया था।
२३:२५ पर होलोग्राफिक-सिद्धांत २

इस तरह के साधारण स्ट्रिंग संघनन प्रक्षेप के बजाय, गुंजाइश वस्तु पर मेरे लिए काम करते थे।
शार्दुल

25

हुबली के उत्तर के समान, बस प्रक्षेप के साथ:

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

1
यह यहाँ काम नहीं किया <span ng-style="{'background-image': 'url(/styles/images/profile.png)'}" style="background-image: url("");"></span>:। @hooblei दृष्टिकोण ने काम किया।
मार्कोस लीमा

समान परिणाम प्राप्त करना :(
कुशाल जायसवाल

9

बस स्वाद की बात है, लेकिन अगर आप चर या फ़ंक्शन को सीधे इस तरह से एक्सेस करना पसंद करते हैं:

<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: $ अवलोकन और $ घड़ी विधियों के बीच अंतर


2

@ आपका जवाब ठीक है। लेकिन अगर आपके पेज में $ 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
        };
    });
});

और देखें कि यदि आप नीचे की तरह एनजी का उपयोग करते हैं, तो आप प्रक्षेप द्वारा छवि प्राप्त करेंगे अन्यथा, आप छवि प्राप्त नहीं कर सकते क्योंकि निर्देश HTTP मूल्य से पहले मूल्य प्राप्त करते हैं।

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

1

मैंने 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 + ')';
}

0

चूंकि आपने उल्लेख किया है ng-srcऔर ऐसा लगता है जैसे आप चाहते हैं कि पृष्ठ आपकी छवि को लोड करने से पहले रेंडरिंग समाप्त कर दे, तो आप ब्राउज़र को रेंडर करने के बाद मूल निर्देश को चलाने के लिए jaime के उत्तर को संशोधित कर सकते हैं ।

यह ब्लॉग पोस्ट इसे बहुत अच्छी तरह से समझाता है; अनिवार्य रूप से, आप कॉलबैक फ़ंक्शन से पहले $timeoutरैपर को सम्मिलित करते हैं window.setTimeoutजिसमें आप सीएसएस में उन संशोधनों को बनाते हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.