Ng-src在AngularJS视图中不更新

Question

我在Angular应用程序中使用以下代码来显示图像:

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

我正在使用其他事件发生时$watch更改image_url属性.例如:

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

使用控制台日志,我看到模型属性正在改变,就像我想要的那样,但这些更改不会反映在DOM中.为什么ng-src在模型更改时不会自动更新？我是Angular的新手,所以也许这是一个我尚未掌握的概念.任何帮助将不胜感激.

Answer 1

您以错误的方式使用 $scope.$watch 。请参阅文档：

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

因此该函数传递了旧值、新值和范围。因此，如果您想更新数据，则需要引用范围。因为无论如何这都等于 $scope，所以您可以直接使用 $scope 而不必关心任何参数。做这个：

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

或者，如果您想使用传递给函数的范围（如上所述，至少在这里不会产生影响）：

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