Angularjs function in ng-href

Question

I want to call a function in ng-href and return the link from the function.

When I click the function it sends page to that function in url. Like:

localhost/pageLink()

<a ng-href="pagelink()" >Link</a>

How can i run the function and return correct link?

naeramarth7 · Answer 1 · 2018-12-06T11:34:47.513

46

Interpolation might do the trick:

<a ng-href="{{pagelink()}}">Link</a>

Edit:

To anyone complaining, that this will execute the code at startup: That's exactly what it must do! It watches the pagelink method for changes and updates the href attribute.

The original questions was:

How can i run the function and return correct link?

pagelink() should not handle routing but rather return a string pointing to the target route. See the ngHref documentation.

If you want to handle routing by yourself, you should rather use ngClick, not ngHref.

edited Dec 06 '18 at 11:34

answered Apr 27 '15 at 07:59

naeramarth7

6,030
1
22
26

I get this error: "Error: $rootScope:infdig Infinite $digest Loop" when calling function that returns url. Why is this? – olefrank Apr 03 '16 at 08:27
2

All this will do is call `pagelink()` in your controller when the page loads. Using `ng-click` without the interpolation should do the trick. – Scott Koland Oct 19 '16 at 22:13
2

@ScottKoland The problem of using `ng-click` is you lose the abilities of `` like `target="_blank"`. Open a webpage in new tab is a suffer in javascript. – iplus26 Apr 22 '17 at 17:11
I find I need to add the attribute `target="_self"` for the link to work when you click it (and not just update the URL) – Matty J Aug 08 '18 at 06:54
It works for me. But I still do not understand why should I use interpolation with an AngularJS directive! Is it not interpolation implicitly used with A.JS directies? – Elio Dec 05 '18 at 10:17
**It must work without clicking**, since it's not executed on click. In this case, the method used to retrieve the string, the a-tag should point to. See the edited answer. – naeramarth7 Dec 06 '18 at 11:36
1

@Elio interpolation is totally legit here. See the documentation for the ngHref attribute: https://docs.angularjs.org/api/ng/directive/ngHref – naeramarth7 Dec 06 '18 at 11:36
@ naeramarth7 now I understand it. Thank you! – Elio Dec 06 '18 at 12:29

score 8 · Answer 2 · answered Oct 19 '16 at 22:12

8

Assuming that pagelink() is at $rootScope, you would use ng-click:

<a href="" ng-click="pagelink()">Link</a>

You need the href="" so the browser will change the cursor on mouse over.

answered Oct 19 '16 at 22:12

Scott Koland

739
9
18

2

cannot open a webpage in new tab – iplus26 Apr 22 '17 at 17:09

Angularjs function in ng-href

2 Answers2