Angularjs - url params: When clicked returns to angular vars in the url

Question

<tbody>
   <tr ng-repeat="message in messages" ng-click="go('pair/{{message.currencyFrom}}/{{message.currencyTo}}')">
      <td>{{ message.currencyFrom }}/{{ message.currencyTo }}</td>
      <td>{{ message.amountSell }}</td>
      <td>{{ message.amountBuy }}</td>
      <td>{{ message.rate }}</td>
   </tr>
</tbody>

The dom view in chrome's inspect, shows ng-click="go('pair/EUR/GBP')" however when clicked I end up at pair/%7B%7Bmessage.currencyFrom%7D%7D/%7B%7Bmessage.currencyTo%7D%7D

It seems the the url is passed as raw angular vars.

I've tried adding the code inside the loop but the same behaviour is exhibited.
I've tried initiating a variable first and passing it to the go function:
ng-init="var url = 'pair/{{message.currencyFrom}}/{{message.currencyTo}}'"

I can't imagine it's relevant but here is go:

$scope.go = function ( path ) {
        $location.path( path );
    };

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

Try like this:

ng-click="go('pair/' + message.currencyFrom + '/' + message.currencyTo)"

It's because you write expression inside ng-click, not template. Same with ng-init.

In directive:

scope: {
    foo: '=', // This means `foo` must be an expression
    bar: '@' // This means `bar` must be template
}

See this question for detailed explanation

edited May 23 '17 at 12:22

Community

1
1

answered Mar 25 '15 at 12:40

karaxuna

26,752
13
82
117

Sigh.. I tried this but wrapped the vars {{}}.. ah well. thank you – mr12086 Mar 25 '15 at 12:44

score 1 · Answer 2 · answered Mar 25 '15 at 12:42

The '{{}}' will be evaluated as characters, not as valid Angular code. Change it to:

go('pair/' + message.currencyFrom + '/' + message.currencyTo);

Angular will handle everything between quotes in a ng-click as Javascript code, so no need to use '{{' or '}}'.

Angularjs - url params: When clicked returns to angular vars in the url

2 Answers2