Value not expanded in Angular templating

Question

I try to understand the basics of angularJS and I test expanding template, because we have some issues with microtemplating we use before.

Please take a look to this fiddle

there is this line: <span ng-click="foo('{{item.id}}', '{{item.name}}')">{{item.name}}</span>

when I look via chrome inspector, it was expanded as expected: <span ng-click="foo('1', 'name1')" class="ng-binding">name1</span>

but the click alerts: {{item.id}} and {{item.name}} unexpanded.

where is the point I'm going wrong? What I have misunderstand?

Answer 1

in your foo function , you are passing strings. Try this <span ng-click="foo(item.id, item.name)">{{item.name}}</span>

:)

Answer 2

In Angular, interpolation is handled separately from directives, at a lower priority.

So what's happening is the ng-click directive is handled first; it parses "foo('{{item.id}}', '{{item.name}}')" without interpolation.
Then, the interpolation is handled, which updates the raw ng-click attribute to "foo('1', 'name1')" .

However, since ng-click already parsed the expression, it doesn't parse it again after interpolation changes. So that's why ng-click doesn't get the updated values.

As @Tedmosby said, the correct way to handle this behavior is to avoid using interpolation within a directive.