Ng-Src не обновляется с учетом AngularJS

Question

Я использую следующий код в моем угловом приложении для отображения изображения:

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

Answer 2

лучшее, что я могу сказать, this working CodePen example, который я создал, все должно работать нормально. Взгляните на то, что я сделал, и дайте мне знать, если я что-то упустил.

Надеюсь, это поможет.

Шаблон:

<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> 

Код:

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