angularjs - {{}} ng-src içinde ciltleme kullanıldı ancak ng-src

yüklenmiyor. Bir img HTML öğesinin ng-src'sine boş değer olmayacak şekilde bağlanmaya çalışıyorum.angularjs - {{}} ng-src içinde ciltleme kullanıldı ancak ng-src

HTML kodu:

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

angularjs kodu:

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

Ben ng-src her zaman kullanıcı Hizmet, ilgili değişken (avatar_url) içinde avatar_url değişkeni güncellemek istiyorum

güncellenir . Kullanıcı Hizmetindeki değişken, sunucuya bir http.POST isteği aracılığıyla güncellenir. Sunucudan gelen yanıtın footerCtrl'daki avatar_url değişkenine yayınlanan kullanıcı Hizmetindeki değişkeni güncellediğini kontrol ettim. Bununla birlikte, resim öğesi HTML, değişiklikleri hiçbir şekilde yansıtmamaktadır. Aslında, avatar_url değişkenini sayfamdaki resimlerden birine göreceli bir yol olarak ayarlamaya çalıştım, görüntü hala hiçbir şey göstermiyor (ng- src değeri boş). T

kaynak

2013-05-06 jiaming

yılında 'Eğer denetleyici bir' setAvatar_url' vs Fonksiyonu var userServices' Eğer 'getAvatar_url' işlevini kullanın. Mesele bu olabilir miydi? –

Merhaba, cevap gecikme için özür dilerim, belki keman http://jsfiddle.net/jiaming/DvNA9/1 kod açıklamakta daha açık olacaktır. Zaman ayırdığın için teşekkürler. – jiaming

jsfiddle'ınız hatalarla doludur ... –

ng-src değerini değiştirmek aslında çok basittir. Şunun gibi:

İşte

<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>

bir uygulama örneğinin bir jsFiddle geçerli: Biz ng-src kullanabilirsiniz ama ng-src's valuenull, '' veya undefined olunca, ng-src çalışmayacaktır http://jsfiddle.net/Hx7B9/2/

kaynak

2013-05-06 14:55:54

Teşekkürler. Bu gerçekten yapmaya çalıştığım şeydi: http://jsfiddle.net/jiaming/DvNA9/12/. Ancak asıl sorun, uygulama motoru sunucusunda, tüm {{}} parantezlerle çakışmalara yol açan bir jinja şablonu olarak oluşturmamdı. – jiaming

Oh, demek istediğin. İstediğiniz takdirde {{}} 'yi değiştirebilirsiniz: http://jsfiddle.net/THjQe/1/ –

Vay, bu cevap için teşekkürler, bunu yapabileceğinizi bilmiyordum. (: – jiaming

. Dolayısıyla, sadece bu durum için ng-if kullanın:

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>

kaynak

2016-06-08 07:38:55 Envy

angularjs - {{}} ng-src içinde ciltleme kullanıldı ancak ng-src

cevap

İlgili konular