我一直试图将值绑定到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');}}
);
我想更新avatar_url变量,ng-src每次更新用户服务中的相应变量(avatar_url).用户服务中的变量通过http.POST请求更新到服务器.我已经检查过来自服务器的响应确实更新了用户服务中的变量,然后广播到该中的avatar_url变量footerCtrl.
但是,图像元素HTML根本不反映更改.事实上,我还尝试将avatar_url变量预设为我页面中其中一张图片的相对路径,图像仍然没有显示任何内容(ng src值为空).Ť
Mor*_*sen 90
更改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>
| 归档时间： |
|
| 查看次数： |
128781 次 |
| 最近记录： |