CODEWITHSUNDEEP
javascripthtmlcssionic-framework
David Ott
David Ott

Reputation: 43

Ionic: Customizing a header button image

I'm trying to add a customized image to a header button image in Ionic framework.

Here is my html in index.html:

<ion-nav-buttons side="right">
<button  ng-src="cartImage" ng-click="login()">
</button>

and in app.js I have:

  $scope.cartImage = "img/cart.png";

but despite the image being there, no dice, I just get a gray button. Is this even the right way of setting an header button in Ionic? Thanks.

Upvotes: 0

Views: 1352

Answers (1)

JoeLinux
JoeLinux

Reputation: 4307

Based on the AngularJS ngSrc documentation, ng-src was made specifically to deal with the inability to use Angular expressions within a src attribute (such as {{ photoUrl }} in an actual URL string).

If you're going to use ngSrc and you want to drop a scope variable in there, you need to use an expression:

<button ng-src="{{ cartImage }}" ng-click="login()"></button>

Upvotes: 1

Related Questions