javascript - Ng-src 不会在 AngularJS View 中更新

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

使用控制台日志，我看到模型属性正在按照我希望的方式更改，但这些更改并未反射(reflect)在 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';
  }
});