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) が更新されるたびに、 の avatar_url 変数を更新したいと思いますng-src。 ユーザー サービスの変数は、サーバーへの http.POST 要求を通じて更新されます。 サーバーからの応答によってユーザー サービスの変数が更新され、それが の avatar_url 変数にブロードキャストされることを確認しましたfooterCtrl。
しかし、画像要素の HTML には変更がまったく反映されません。実際、ページ内の画像の 1 つへの相対パスに avatar_url 変数を事前設定しようとしましたが、画像はまだ何も表示されません (ng-src値が空です)。T
ベストアンサー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/