1

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?

Jose Mendez
  • 43
  • 7
  • 1
    See [this question](http://stackoverflow.com/questions/17039926/adding-parameter-to-ng-click-function-inside-ng-repeat-doesnt-seem-to-work). – Skylar Sep 22 '16 at 00:42
  • I would get used to using [ngBind](https://docs.angularjs.org/api/ng/directive/ngBind). That way you don't need to bother with '{{}}'. Also ngBind loads faster. – Mickers Sep 22 '16 at 19:53
  • @Mickers: ok I'll keep it in mind, but It does not fit inside ng-click. – Jose Mendez Sep 24 '16 at 21:33

3 Answers3

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.

Mickers
  • 1,367
  • 1
  • 20
  • 28
  • Well its clear now the way that handlebars work in general. What I cant understand is why this currently works in other code snippet we are being taught in an angular course. I mean adding the {{}} inside the ng-click directive. I guess I would have to provide a MCVE to further illustrate. – Jose Mendez Sep 30 '16 at 15:32
0

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

Minkyu Kim
  • 1,144
  • 3
  • 18
  • 43
  • 1
    Wow... this worked. Removed the {{}} part. This is SO incredibly frustrating: the code snippet comes from another controller/template that are working just fine with the curly braces. Worst part is, this is coming from an AngularJS course I'm taking. Would love to understand why does it work on one side but not the other. The only big difference is that the dish object referred to in the working scenario comes from an array of dishes in the form ng-repeat="dish in dishes". Thank you Minkyu, let me know if you have more insight on this. – Jose Mendez Sep 22 '16 at 00:46
  • I don't know really because I'm new on angula.js as you but I heard that is such as compiling mechanism, In template, we should use that like jstl. ng-somethings are part of angular.js driectives so we don't use it but works well. – Minkyu Kim Sep 22 '16 at 00:52
0

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

Arun Kumar Mohan
  • 11,517
  • 3
  • 23
  • 44
Jeffrey A. Gochin
  • 964
  • 6
  • 18
  • Yeah exactly Arun.... Please if you know why it may be working fine on certain other situations as stated in my comment to Minkyu, kindly let me know. – Jose Mendez Sep 22 '16 at 00:50