angularjs - img - ng src angular 5
angularjs-usando el enlace{{}} dentro de ng-src pero ng-src no se carga (2)
He estado tratando de vincular un valor al ng-src de un elemento HTML img en vano.
Código HTML:
<div ng-controller=''footerCtrl''>
<a href="#"><img ng-src="{{avatar_url}}"/></a>
</div>
Código 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'');}}
);
Me gustaría actualizar la variable avatar_url en ng-src cada vez que se actualice su variable respectiva (avatar_url) en el Servicio del usuario. La variable en el Servicio de usuario se actualiza a través de una solicitud http.POST al servidor. He comprobado que la respuesta del servidor actualiza la variable en el Servicio de usuario que luego se transmite a la variable avatar_url en el footerCtrl .
Sin embargo, el elemento de imagen HTML no refleja los cambios en absoluto. De hecho, también he intentado preestablecer la variable avatar_url en una ruta relativa a una de las imágenes en mi página, la imagen aún no muestra nada (el valor ng- src está vacío). T
Cambiar el valor ng-src es realmente muy simple. Me gusta esto:
<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>
Aquí hay un jsFiddle de un ejemplo funcional: http://jsfiddle.net/Hx7B9/2/
Podemos usar ng-src pero cuando ng-src''s value ng-src vuelve null '''' o undefined , ng-src no funcionará. Así que solo usa ng-if para este caso:
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>