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

i have link handler in html:

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

it triggers 'open' function in self-made angular-ui routing factory / helper , sends 'pagename' param. open method checks if there's handler or state loading view.

var availablestates = $state.get();     if (!pages[name] || availablestates.indexof(name) === -1) {         alert("state or loader state: '{0}' not exist!".format(name));         return;     } 

when clicked alert shows message:

but when in web console, value has been set properly.

i use this, causes behaviour , how 1 fix this?

you should not use {{ }} inside ng expressions. replace

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

with

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

the reason should consider specialized "ng-like" expressions enclosed in {{ }}, since evaluated angular expressions. should use {{ }} when want tell angular want content enclosed on double brackets evaluated angular expression.