angularjs – 在ng-src中使用{{}}绑定，但是ng-src不加载
我一直在尝试绑定一个img HTML元素的ng-src值无济于事。
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');}} );
我想更新ng-src的avatar_urlvariables，每次更新用户Service中的相应variables（avatar_url）。 用户服务中的variables通过对服务器的http.POST请求进行更新。 我已经检查过，来自服务器的响应确实更新了用户服务中的variables，然后广播到footerCtrl中的footerCtrlvariables。
但是，图像元素HTML并不能完全反映这些变化。 实际上，我也尝试将avatar_urlvariables预设为页面中某个图片的相对path，图像仍然不显示（ngrcrc值为空）。 Ť
改变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/
我们可以使用ng-src但是当ng-src's 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>
