Ng-src doesn't update in AngularJS view

Question

I'm using the following code in my Angular app to display an image:

<img ng-src="{{planet.image_url}}" class="planet-img"/>

And I'm using $watch to change the image_url attribute when other events happen. For example:

$scope.$watch('planet', function(planet){
  if (planet.name == 'pluto') {
     planet.image_url = 'images/pluto.png';
  }
});

Using console logs, I see that the model attributes are changing just like I want them to, but these changes are not reflected in the DOM. Why isn't ng-src updating automatically as the model changes? I'm new to Angular, so maybe this is a concept I haven't yet grasped. Any help will be greatly appreciated.

What was the default planet.image_url? If it is the same as the "images/pluto.png", you may need to use a cache buster. — geniuscarrier
– geniuscarrier, Commented Oct 1, 2013 at 22:44

Juliane Holzt · Accepted Answer · 2017-10-25 19:06:03Z

2

You are using $scope.$watch in a wrong way. Please see the documentation:

function(newValue, oldValue, scope): 
called with current and previous values as parameters.

So the function is passed the old and the new value and the scope. So if you want to make updates to your data, you will need to reference the scope. As this will equal to $scope here anyway, you can just use $scope directly and don't care for any parameter. Do this:

$scope.$watch('planet', function(){
  if ($scope.planet.name == 'pluto') {
    $scope.planet.image_url = 'images/pluto.png';
  }
});

Or if you want to use the scope passed to the function (as said, it will not make a difference at least here):

$scope.$watch('planet', function(newval, oldval, scope){
  if (newval.name == 'pluto') {
    scope.planet.image_url = 'images/pluto.png';
  }
});

edited Oct 25, 2017 at 19:06

answered Oct 1, 2013 at 22:45

Juliane Holzt

2,14515 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam · Accepted Answer · 2013-10-01 23:21:47Z

The best I can tell by this working CodePen example that I created everything should work just fine. Take a look at what I did and let me know if I am missing something.

I hope this helps.

The template:

<section class="well" ng-app="app" ng-controller="MainCtrl">
  Select Planet:<br>
  <label>Earth <input type="radio" ng-model="planetId" value="1" /></label>
  <label>Mars <input type="radio" ng-model="planetId" value="2" /></label>

  <img ng-src="{{currentPlanet.url}}" />
  <span class="label">{{currentPlanet.label}}</span>
</section>

The code:

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.currentPlanet = {};

  $scope.planets = [{
    id: 1,
    label: 'Earth',
    url: 'http://s10.postimg.org/uyggrc14l/earth.png'
  },{
    id: 2,
    label: 'Mars',
    url: 'http://s21.postimg.org/maarztjoz/mars.png'
  }];

  $scope.$watch('planetId', function(id) {
    for(var i = 0; i < $scope.planets.length; i++) {
      var planet = $scope.planets[i];
      if(planet.id == id) {
        $scope.currentPlanet = planet;
        break;
      }
    }
  });
});

Collectives™ on Stack Overflow

Ng-src doesn't update in AngularJS view

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related