Angularjs - с помощью {{}} связывания внутри ng-src, но ng-src не загружается

Я пытаюсь привязать значение к ng-src элемента HTML img безрезультатно.

Код HTML:

<div ng-controller='footerCtrl'>
<a href="#"><img ng-src="{{avatar_url}}"/></a>
</div>

Код AngularJS:

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

Я хотел бы обновить переменную avatar_url в ng-src каждый раз, когда обновляется соответствующая переменная (avatar_url) в службе пользователя. Переменная в службе пользователя обновляется через запрос http.POST на сервер. Я проверил, что ответ с сервера обновляет переменную в пользовательской службе, которая затем передается в переменную аватара_rl в footerCtrl.

Однако элемент HTML изображения не отражает изменений вообще. Фактически, я также попытался установить переменную аватара_rl в относительный путь к одному из изображений на моей странице, изображение все еще ничего не показывает (значение ng- src пустое). Т

Ответы

Ответ 1

Изменение значения ng-src на самом деле очень простое. Вот так:

<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<img ng-src="{{img_url}}">
<button ng-click="img_url = 'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'">Click</button>
</body>
</html>

Вот пример jsFiddle рабочего примера: http://jsfiddle.net/Hx7B9/2/

Ответ 2

Мы можем использовать ng-src, но когда ng-src value стал null, '' или undefined, ng-src не будет работать. Поэтому просто используйте ng-if для этого случая:

http://jsfiddle.net/Hx7B9/299/

<div ng-app>
    <div ng-controller="AppCtrl"> 
        <a href='#'><img ng-src="{{link}}" ng-if="!!link"/></a>
        <button ng-click="changeLink()">Change Image</button>
    </div>
</div>