AngularJS - का उपयोग करना {{}} एनजी-src लेकिन एनजी-src लोड नहीं करता है

मैं कोई लाभ नहीं हुआ एक img HTML तत्व का एनजी-src के लिए एक मूल्य बाध्य करने के लिए कोशिश कर रहे हैं अंदर बंधन।AngularJS - का उपयोग करना {{}} एनजी-src लेकिन एनजी-src लोड नहीं करता है

एचटीएमएल कोड:

<div ng-controller='footerCtrl'> 
<a href="#"><img ng-src="{{avatar_url}}"/></a> 
</div>

AngularJS कोड:

app.controller('footerCtrl',function($scope, userServices) 
{ 
$scope.avatar_url=''; 
$scope.$on('updateAvatar', function() 
{$scope.avatar_url = userServices.getAvatar_url();} 
); 
} 

app.factory('userServices', function($rootScope){ 
var avatar_url=''; 
return{ setAvatar_url: function(newAvatar_url) 
{ avatar_url = newAvatar_url; $rootScope.$broadcast('updateAvatar');}} 
);

मैं ng-src हर समय उपयोगकर्ता सेवा में अपने संबंधित चर (avatar_url) में avatar_url चर का अद्यतन करना चाहते हैं अद्यतन किया जाता है । उपयोगकर्ता सेवा में चर सर्वर के http.POST अनुरोध के माध्यम से अद्यतन किया जाता है। मैंने जांच की है कि सर्वर से प्रतिक्रिया उपयोगकर्ता सेवा में चर अद्यतन करती है जिसे footerCtrl में avatar_url चर में प्रसारित किया जाता है।

हालांकि, छवि तत्व एचटीएमएल सब पर बदलाव को प्रतिबिंबित नहीं करता है। वास्तव में, मैं भी अपने पृष्ठ में चित्रों में से एक के लिए एक रिश्तेदार पथ के लिए avatar_url चर पूर्व निर्धारित करने की कोशिश की, तब भी चित्र (ng- src मान रिक्त है) कुछ भी नहीं पता चलता है। टी

स्रोत

2013-05-06 jiaming

में 'userServices' आप नियंत्रक में एक' setAvatar_url' समारोह बनाम है आप 'getAvatar_url' समारोह का उपयोग करें। क्या यह मुद्दा हो सकता है? –

हाय, जवाब देना करने में देरी के लिए खेद है, हो सकता है बेला http://jsfiddle.net/jiaming/DvNA9/1 कोड समझाने में स्पष्ट हो जाएगा। आपके समय के लिए शुक्रिया। – jiaming

आपका jsfiddle कीड़े से भरा हुआ है ... –

ng-src मान का बदलना वास्तव में बहुत सरल है। इस तरह:

<html ng-app> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
</head> 
<body> 
<img ng-src="{{img_url}}"> 
<button ng-click="img_url = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'">Click</button> 
</body> 
</html>

यहाँ एक काम कर उदाहरण के jsFiddle है: http://jsfiddle.net/Hx7B9/2/

स्रोत

2013-05-06 14:55:54

धन्यवाद। यह वही था जो मैं वास्तव में करने की कोशिश कर रहा था: http://jsfiddle.net/jiaming/DvNA9/12/। लेकिन मुख्य समस्या यह थी कि मैं इसे ऐप इंजन सर्वर में एक जिन्जा टेम्पलेट के रूप में प्रस्तुत कर रहा था जिसके कारण सभी {{}} ब्रेसिज़ के साथ संघर्ष हुआ। – jiaming

ओह, आपका मतलब है। यदि आप चाहें तो आप '{{}}' को बदल सकते हैं: http://jsfiddle.net/THjQe/1/ –

वाह, उस उत्तर के लिए धन्यवाद, मुझे नहीं पता था कि आप ऐसा कर सकते हैं। (: – jiaming

हम ng-src उपयोग कर सकते हैं, लेकिन जब ng-src's value बन null, '' या undefined, ng-src काम नहीं करेगा। तो बस इस मामले के लिए ng-if का उपयोग करें:

http://jsfiddle.net/Hx7B9/299/

<div ng-app> 
    <div ng-controller="AppCtrl"> 
     <a href='#'><img ng-src="{{link}}" ng-if="!!link"/></a> 
     <button ng-click="changeLink()">Change Image</button> 
    </div> 
</div>

स्रोत

2016-06-08 07:38:55 Envy

AngularJS - का उपयोग करना {{}} एनजी-src लेकिन एनजी-src लोड नहीं करता है

उत्तर

संबंधित मुद्दे