AngularJS - एनजी शैली को अपडेट नहीं करता संपत्ति

Question

मैं एक सेवा है जो रिटर्न चित्र URL, और यह निम्नलिखित कोड का उपयोग कर कहा जाता है सीएसएस पृष्ठभूमि: मैं एनजी के साथ एक छवि के लिए इस्तेमाल किया मेरे विचार पर

angular.forEach(results, function (item) { 
    item.img = "/images/searchItem.jpg"; 
    $http.post("https://my.api.com/?id=" + item.id).success(
      function (url) { 
       item.img = url; 
      }); 
}); 

-src विशेषता यह है कि पूरी तरह से तो जैसे काम किया:

<span ng-style="{'background':'transparent url({{item.img}})'}"></span> 

:

<img ng-src="{{item.img}}"> 

तो मैं बजाय एक स्पैन पर पृष्ठभूमि छवि का उपयोग करने का निर्णय लिया है

अब प्रवाह केवल पहली बार चलाने पर काम करता है, के बाद कि मैं (कंसोल में) देख सकते हैं निम्नलिखित एचटीएमएल

<span ng-style="{'background':'transparent url(http://expertsimages.liveperson.com/images/rating/rate10.gif)'}" style="background-image: url(https://fb.lp-chat.com/images/searchItem.jpg); background-color: transparent; background-position: initial initial; background-repeat: initial initial;"></span> 

जो इंगित करता है कि चर अद्यतन, तथापि एचटीएमएल अपनी आरंभिक अवस्था पर अब भी है।

मैंने पोस्ट सफलता पर आवेदन/डाइजेस्ट को कॉल करने का प्रयास किया, लेकिन $ (जो समझ में आता है) में पहले से ही डाइजेस्ट त्रुटि मिली। संघर्ष की बात यह है कि एक सामान्य पचाने के बाद (उदाहरण के लिए अन्य यूई परिवर्तनों पर) शैली लागू की जा रही है और मुझे सही छवि दिखाई दे रही है।

मुझे यहां क्या याद आ रही है?

अद्यतन: मैं एक JS fiddle कि इस मुद्दे को दर्शाता बना लिया है ... मेरे लिए कोणीय में एक बग की तरह दिखता है।

Answer 1

मैं भी इसमें भाग गया। {{ }} के साथ मूल्यांकन करने के बजाय, स्ट्रिंग + मान concatenation का उपयोग करें।

यह काम करेगा: [। शैली *]

<span ng-style="{'background':'transparent url(' + item.img + ')'}"></span>)

यहाँ अपने fiddle

Answer 2

कहाँ आप वर्तमान में अपने दायरे चर अद्यतन कर रहे हैं, आपके विचार अपने दायरे को अद्यतन धक्का और बाद में करने के लिए एक $timeout कॉल के भीतर इस लपेट, यह प्रभावी रूप से पहले से ही प्रगति संघर्ष में डाइजेस्ट से परहेज अगले digest को अद्यतन टक्कर होगी :

$timeout(function(){ 
     $scope.var = value; 
    }); 

This question thread आप apply बनाम timeout के बारे में कुछ उपयोगी जानकारी दे सकते हैं आदि

Answer 3

क्योंकि कोणीय सामग्री के मूल्यांकन यह काम नहीं करता है केवल एक बार एक ब्रैकेट का टी और वह स्ट्रिंग का पता नहीं लगाता है जिसे आप उस स्ट्रिंग के अंदर बांधना चाहते हैं।

आप फिर भी इस तरह के रूप में अपने निर्देश बना सकते हैं:

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

और उसके बाद इस तरह अपने टेम्पलेट में इसका इस्तेमाल करते हैं:

<div ng-if="vis" class="container" back-img="{{imgSrc}}"></div> 

मैं अपने बेला अद्यतन किया है और यह ठीक काम करने लगता है http://jsfiddle.net/dS4pB/3/

Answer 4

आपको शायद एक ही समस्या का सामना करना पड़ रहा है जिसे मैंने हाल ही में सामना किया और एनजी-बाइंड का उपयोग करके हल किया।

जांच जवाब इस सवाल में विस्तार से बताया:

AngularJS : Why ng-bind is better than {{}} in angular?

एक बार मैं एनजी-बाँध मेरी innerHTML ठीक से अद्यतन किया गया है इस्तेमाल किया।

Answer 5

कोणीय 2 ऐसा करने का एक मिठाई भी तरह से, है = "का मान"

की एक काम संस्करण है

<span [style.background-color]="transparent" [style.background-image]="item.img"></span>