angular {{ }} expression not resolving inside ng-click

Question

The line below fails, the console shows "index is undefined" when the image is clicked:

<img class="full-image" ng-click="addFavorite({{dish.id}})" ng-src="{{baseURL+dish.image}}" title="{{dish.name}}" >

However, any of the other expressions resolve the interpolation just fine. I even added this one to prove I could show the dish id:

<h2>{{dish.name}} {{dish.id}}

And I get the dish name and to the right the dish id printed out on the browser.

If I swap the expression to a hardcoded value such as 2, the function addFavorite() runs fine on click:

<img class="full-image" ng-click="addFavorite(2)" ng-src="{{baseURL+dish.image}}" title="{{dish.name}}" >

What could be the error that prevents the addFavorite() funcion from resolving the {{dish.id}} expression?

Answer 1

The reason ng-click works without handlebars is because it's an Angular directive that will resolve an expression aka no handlebars needed. NgSource takes a string. To force a variable you have to use handlebars to keep it from being hard coded. Same with the Title property. It's not a directive and it expects to be passed a string. When the page loads angular will resolve the handlebars and insert the correct text from $scope. Hope that helps clear that question up.

Answer 2

Try leaving off the handlebars. just use ng-click="addFavorite(dish.id)".

Answer 3

when you're using like ng-click you don't need to use {{}}

Update :

It is helpful to you https://docs.angularjs.org/api/ng/directive/ngClick