AngularJS ng-href does not go to link

Question

I've checked the docs and the ng-href not working thread on here already but I'm stumped.

Does ng-href require a full path? Mine currently looks like <a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-href="/page.php#param:{{id.num}}"><span>go here</span></a>, but when I click on it, while it changes the URL in the address bar of the browser correctly (and it's a legitimate URL; I can hit "enter" in the address bar and it will "go there"), it does not actually GO TO that page.

What's going wrong? Do I need to combine this with an ng-click of some sort? And if so, why?

UPDATE: The link is going to the same page from which it is being called, but with a different parameter for a different data record display. I think that may have something to do with it ...

Alexis Gamarra · Accepted Answer · 2015-04-20 21:52:16Z

14

The simplest way to do this is adding target="_self", in your case this is the solution:

<a ng-title="{{title.text}}" ng-id="{{id.num}}"
 ng-href="/page.php#param:{{id.num}}" target="_self">
 <span>go here</span>
</a>

No ng-click and no AngularJS function are required.

answered Apr 20, 2015 at 21:52

Alexis Gamarra

4,4321 gold badge35 silver badges25 bronze badges

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

2 Comments

code-sushi Over a year ago

I'll have to try that out sometime when I can set up a test case scenario. Since I changed jobs I don't have access to the previous project which prompted this question originally. Thanks for the suggestion.

Jordan Rieger Over a year ago

This answer sheds some light: stackoverflow.com/a/28802951/284704. Apparently Angular will always treat href's as URL/location-rewriters inside the ngApp as long as the $location service is being used in that way. You have to override with target="_self" to get normal link behavior.

code-sushi · Accepted Answer · 2014-09-02 20:00:25Z

2

Here is how I ended up solving this one:

Template:

<a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-click="go_to_item(id.num)">
    <span>{{title.text}}</span>
</a>

Javascript:

    $scope.go_to_item = function(display) {
        window.location = '/page.php#id:' + display;
        location.reload();
    };

This is working as it should in our app. Why the Angular-specific $location and $window don't work there is a mystery to me, though. I tried those first and they didn't do it, so if anyone can explain why, I'll give you "accept answer" for this question! ;-)

answered Sep 2, 2014 at 20:00

code-sushi

7193 gold badges7 silver badges23 bronze badges

3 Comments

Alexis Gamarra Over a year ago

Hi @code-sushi, did you find another way to do this? Maybe using and AngularJS configuration..

code-sushi Over a year ago

The code I posted above, starting with "Here is how I ended up solving this one," is the way I found to do this. Hard to believe it was only 7 months ago -- seems like a lifetime ago! I'm not using Angular in my current project so I'm not sure if I'd be doing it differently today or not. Feel free to share any solutions that have worked for you though. Happy coding!

Alexis Gamarra Over a year ago

I've just add a solution with another way to do that, I hope it helps to someone :)

PH. · Accepted Answer · 2014-08-29 19:04:10Z

0

I tried your code and it worked for me:

<script>
$scope.title = {text: "test"};
$scope.id = {num: 123};
</script>

<a ng-title="{{title.text}}" ng-id="{{id.num}}" ng-href="/page.php#param:{{id.num}}"><span>go here</span></a>

becomes like this:

<a ng-title="test" ng-id="123" ng-href="/page.php#param:123" href="/page.php#param:123"><span>go here</span></a>

answered Aug 29, 2014 at 19:04

PH.

6268 silver badges17 bronze badges

1 Comment

code-sushi Over a year ago

But perhaps because you're not actually ON "/page.php" when you click it, because it's not working for me. I conferred with a co-worker who confirmed I'm going to have to use ng-click instead. If I come up with the solution before someone else, I'll post it here. Appreciate your response though!

basickarl · Accepted Answer · 2015-09-23 19:29:28Z

-4

I had this problem earlier. I was not allowed to have ng-href inside of a ng-controller for some reason.

answered Sep 23, 2015 at 19:29

basickarl

41.2k70 gold badges239 silver badges358 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-href does not go to link

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related