58

我一直在尝试将值绑定到 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_url）时更新 avatar_url 变量。用户服务中的变量通过对服务器的 http.POST 请求进行更新。我检查了来自服务器的响应确实更新了用户服务中的变量，然后将其广播到footerCtrl.

但是，图像元素 HTML 根本不反映这些变化。事实上，我也尝试过将 avatar_url 变量预设为我页面中一张图片的相对路径，图片仍然没有显示（ng-src值为空）。吨

4

2 回答 2

91

更改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/

于 2013-05-06T14:55:54.813 回答
8

我们可以使用ng-src但是当ng-src's valuebecome null, ''or 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>
于 2016-06-08T07:38:55.233 回答