10

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 ...

Community
  • 1
  • 1
code-sushi
  • 719
  • 3
  • 7
  • 23

4 Answers4

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.

Alexis Gamarra
  • 4,362
  • 1
  • 33
  • 23
  • 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. – code-sushi Apr 21 '15 at 17:13
  • 2
    This answer sheds some light: http://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. – Jordan Rieger Apr 11 '17 at 21:52
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! ;-)

code-sushi
  • 719
  • 3
  • 7
  • 23
  • Hi @code-sushi, did you find another way to do this? Maybe using and AngularJS configuration.. – Alexis Gamarra Apr 17 '15 at 16:42
  • 1
    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! – code-sushi Apr 20 '15 at 21:11
  • I've just add a solution with another way to do that, I hope it helps to someone :) – Alexis Gamarra Apr 20 '15 at 21:54
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>
PH.
  • 536
  • 7
  • 17
  • 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! – code-sushi Aug 29 '14 at 19:18
-4

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

basickarl
  • 37,187
  • 64
  • 214
  • 335