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 ,或者是undefinedng-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>