CODEWITHSUNDEEP
angularjsangularjs-ng-href
code-sushi
code-sushi

Reputation: 719

AngularJS ng-href does not go to link

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

Upvotes: 10

Views: 18928

Answers (4)

basickarl
basickarl

Reputation: 40561

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

Upvotes: -4

Alexis Gamarra
Alexis Gamarra

Reputation: 4432

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.

Upvotes: 14

code-sushi
code-sushi

Reputation: 719

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! ;-)

Upvotes: 2

PH.
PH.

Reputation: 616

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>

Upvotes: 0

Related Questions