using {{}} binding inside ng-src img elemnt but img doesn't load

[Jia Ming Neo]

I have been trying to bind a value to the ng-src of an img HTML element to no avail.

HTML code:

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

AngularJS code:

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

I would like to update the avatar_url variable in the ng-src every-time its respective variable(avatar_url) in the user Service is updated. The variable in the user Service is updated through a http.POST request to the server. I have checked that the response from the server does update the variable in the user Service which is then broadcast to the avatar_url variable in the footerCtrl.

However, the image element HTML does not reflect the changes at all. In fact, I have also tried to preset the avatar_url variable to a relative path to one of the pictures in my page, the image still shows nothing(the ng-src value is empty).

Link to code example: http://jsfiddle.net/jiaming/DvNA9/

[Eduard Gamonal]

On Mon, May 6, 2013 at 11:11 AM, Jia Ming Neo <njm...@gmail.com> wrote:

ng-src="{{avatar_url}}"

hi,

you don't have to write {{}} in an ng-src directive.

you might want to try:

 ng-src="avatar_url"

[Jia Ming Neo]

Hi, 

i have just tried that. It doesnt work, it sets the src of the img tag to "avatar_url" which would raise a 404 error.

Thanks

[Pascal Precht]

Just looked into your fiddle. The button doesn't do anything at all, since there isn't a gettingLink() method on the scope of the controller. 

[Jia Ming Neo]

Hi,

Sorry for confusing you with the fiddle. It is actually just a short snippet of my code. I thought it would be clearer to separate it and show it in the fliddle. It is not hooked up to a server and thus, it does not do anything at all.

The main idea of my app is to propagate the changes of the "link" variable from one controller to the other using the uServices. The controller(control2) would send a http request to my server to get the link from the database. The response data would then be used to change the "link" variable in uServices. Then, while setting the "link" variable, it would broadcast the change to the other controller(control) to update the changes. I have checked that the changes are successfully propagated to the other controller(control) after the broadcast.

However, the change does not appear in the ng-src of the img element. The content ng-src of the element is empty, which is most probably the reason why the image does not appear as it doesn't have a src attribute. As I am new to AngularJS, I am not sure if the error arise from incorrect syntax or other logic error. I have tried to fix the "link" variable of the controller(control) to a fixed link, as in http://jsfiddle.net/jiaming/DvNA9/1/ . But the image still would not appear. Is there anything that I am seriously doing wrong. Thanks in advance for your time. (:

[Luke Kende]

Seems like you are making it harder than it needs to be.

I might suggest just using 'service' instead of 'factory' if this is a singleton shared between controllers.  Also you don't need to create methods in your service and do all the event management manually.    Have you tried something like this where the two-way binding handles the events for you? (A simplified version of your code)

function control($scope, uServices) {

    $scope.link = uServices.link

}

app = module('example', []);

app.service('uServices', function () {

    var _link = '' //persistent reference

    return {

       link: _link

    }

});

function control2($scope, uServices) {

    $scope.clickGetLink = function () {

       

        //you could also comment out the http call below and just try setting the 

        //uServices.link to a hardcoded value when clickGetLink called for testing

        http.post('/details', data).success(function (data) {

            uServices.link = data['link'];

        });