CODEWITHSUNDEEP
htmlangularjsbuttonangular-material
guagay_wk
guagay_wk

Reputation: 28030

Hyperlink on angular material button does not cause browser to jump to that link

I am using angular material on angularjs v1.

I am having problems with a simple menu bar using angular material. Here is the html code for the menu bar;

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding: 0px;margin:0px;float: left;">
    <h2>Test page</h2>
    <md-button href="Data1.html">Data1</md-button>
    <md-button href="Data2.html">Data2</md-button>
</md-toolbar>

enter image description here

When I click on Data1 button, the browser URL changes to "http://127.0.0.1/test-site/webroot/app/Data1.html" but the browser does not go to that webpage. I have to manually refresh the page to force the browser to go to that webpage.

How can I get the browser to go to that page when the button is pressed?

EDIT: The existing answer works but it opens a new tab. I would like the browser to go to the new webpage on the existing tab. Preferably, it would be nice if the solution can be purely in html but using javascript would be fine. I have created a bounty.

Upvotes: 1

Views: 19347

Answers (3)

Sir Mbuki
Sir Mbuki

Reputation: 1210

Angular has $location and ng-href to help you do that -:

For example when using ng-href you can do the following

1. (link, don't reload)

<a id="link-1" href ng-click="value = 1">link 1</a>

2. (link, don't reload)

<a id="link-2" href="" ng-click="value = 2">link 2</a>

3. (link, reload!)

<a id="link-3" ng-href="/{{'123'}}">link 3</a>

4. (link, don't reload)

<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a>

5. (no link)

<a id="link-5" name="xxx" ng-click="value = 5">anchor</a>

6. (link, change location)

<a id="link-6" ng-href="{{value}}">link</a>

The $location service parses the URL in the browser address bar (based on window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into the $location service and changes to $location are reflected into the browser address bar.

So any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser. **

BUT

It does not cause a full page reload when the browser URL is changed. To reload the page after changing the URL, use the lower-level API, $window.location.href.

READ MORE FROM

https://docs.angularjs.org/guide/$location

https://docs.angularjs.org/api/ng/directive/ngHref

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

Use ng-href like this

<div>
 <md-button ng-href="{{googleUrl}}" target="_blank">Go to Google</md-button>
</div>

DEMO

UPDATE:

You can achieve it by mentioning target="_self"

   <md-button ng-href="{{googleUrl}}" target="_self">Go to Google</md-button>

DEMO

Upvotes: 12

Patryk Łucka
Patryk Łucka

Reputation: 1043

Try to change window.location.

HTML

<md-button ng-click="changePage('Data1.html')">Data1</md-button>
<md-button ng-click="changePage('Data2.html')">Data2</md-button>

JS

$scope.changePage= function(page){
    window.location.assign(window.location.origin + '/test-site/webroot/app/' + page);
}

I can't test it, so I'm not sure that there are no bugs : ) But something similar should be what you need. Let me know how it works!

Upvotes: 1

Related Questions