Angular value binding sent to ng-click function instead of value

Question

I have a link with handler in HTML:

<div class="menu-item" ng-repeat="pageName in pages">
    <a ng-click="routing.open('{{pageName}}')">{{pageName}}</a>
</div>

It triggers the 'open' function in a self-made Angular-UI Routing Factory / helper and sends the 'pageName' as param. The open method checks if there's a handler or state for loading a view.

var availableStates = $state.get();
    if (!pages[name] || availableStates.indexOf(name) === -1) {
        alert("State or Loader for state: '{0}' does not exist!".format(name));
        return;
    }

When clicked the alert shows with this message: enter image description here

But when I look in the web console, the value has been set properly. enter image description here

I could use some help with this, what causes this behaviour and how does one fix this?

Tiago Martins · Accepted Answer · 2015-03-28 16:43:02Z

2

You should not use {{ }} inside ng expressions. Replace

ng-click="routing.open('{{pageName}}')">

with

ng-click="routing.open(pageName)">

The reason for this is that you should consider all the specialized "ng-like" expressions as already enclosed in {{ }}, since they are already evaluated as angular expressions. You should only use {{ }} when you want to tell angular that you want the content enclosed on the double brackets to be evaluated as an angular expression.

edited Mar 28, 2015 at 16:43

answered Mar 28, 2015 at 16:23

Tiago Martins

7276 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular value binding sent to ng-click function instead of value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related