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 変数をページ内の写真の 1 つへの相対パスに事前設定しようとしましたが、画像にはまだ何も表示されません (ng-src値は空です)。T

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 value使えなくなります。したがって、この場合に使用してください：null''undefinedng-srcng-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 に答える