angularjs - using binding inside ng-src but ng-src doesn t load

Question

I have been trying to bind a value to the ng-src of an img HTML element to no avail   HTML code    lt div ng-controller  footerCtrl  gt   lt a href     gt  lt img ng-src    avatar url     gt  lt  a gt   lt  div gt    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    T

User · Answer

We can use ng-src but when ng-src s value became null     or undefined  ng-src will not work  So just use ng-if for this case    http   jsfiddle net Hx7B9 299    lt div ng-app gt       lt div ng-controller  AppCtrl  gt            lt a href     gt  lt img ng-src    link    ng-if    link   gt  lt  a gt           lt button ng-click  changeLink    gt Change Image lt  button gt       lt  div gt   lt  div gt

User · Answer

Changing the ng-src value is actually very simple  Like this    lt html ng-app gt   lt head gt   lt script src  https   ajax googleapis com ajax libs angularjs 1 0 6 angular min js  gt  lt  script gt   lt  head gt   lt body gt   lt img ng-src    img url    gt   lt button ng-click  img url    https   farm4 staticflickr com 3261 2801924702 ffbdeda927 d jpg   gt Click lt  button gt   lt  body gt   lt  html gt    Here is a jsFiddle of a working example  http   jsfiddle net Hx7B9 2

[angularjs] angularjs - using {{}} binding inside ng-src but ng-src doesn't load

Examples related to angularjs