CODEWITHSUNDEEP
javascriptjqueryangularjsbinding
Jeroen Vorsselman
Jeroen Vorsselman

Reputation: 823

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

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?

Upvotes: 0

Views: 41

Answers (1)

Tiago Martins
Tiago Martins

Reputation: 727

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.

Upvotes: 2

Related Questions