Question

我一直在尝试将值绑定到img HTML元素的ng-src但无济于事。

HTML code：

<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请求更新到服务器。我检查过服务器的响应确实更新了用户服务中的变量，然后广播到footerCtrl中的avatar_url变量。

但是，图像元素HTML根本不反映更改。事实上，我还尝试将avatar_url变量预设为我页面中某个图片的相对路径，图像仍然没有显示（ng - src值为空）。 Ť

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

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

angularjs - 在ng-src中使用{{}}绑定但不加载ng-src

2 个答案: