角度材质按钮上的超链接不会导致浏览器跳转到该链接

Question

我在angularjs v1上使用角度材料。

我在使用角度材料的简单菜单栏时遇到问题。这是菜单栏的html代码;

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

当我点击Data1按钮时，浏览器网址会更改为＆＃34; http://127.0.0.1/test-site/webroot/app/Data1.html＆＃34;但是浏览器没有进入该网页。我必须手动刷新页面以强制浏览器转到该网页。

如何在按下按钮时让浏览器转到该页面？

编辑：现有答案有效，但会打开一个新标签。我希望浏览器转到现有选项卡上的新网页。优选地，如果解决方案可以纯粹在html中，但使用javascript就可以了。我创造了一笔赏金。

Answer 1

像这样使用ng-href

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

<强> DEMO

<强>更新

你可以通过提及target =＆＃34; _self＆＃34;

来实现它

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

<强> DEMO

Answer 2

尝试更改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);
}

我无法测试它，所以我不确定没有错误:)但类似的东西应该是你需要的东西。让我知道它是如何工作的！

Answer 3

Angular有$location和ng-href来帮助您做到这一点 -

例如，使用ng-href时，您可以执行以下操作

<强> 1。 （链接，不要重新加载）

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

<强> 2。 （链接，不要重新加载）

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

第3。 （链接，重新加载！）

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

<强> 4。 （链接，不要重新加载）

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

<强> 5。 （没有链接）

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

<强> 6。 （链接，更改位置）

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

$location服务解析浏览器地址栏中的URL（基于window.location），并使URL可供您的应用程序使用。地址栏中URL的更改会反映到$location服务中，对$ location的更改会反映到浏览器地址栏中。

因此，只要您的应用程序需要对当前URL中的更改做出反应，或者您想要在浏览器中更改当前URL， **

BUT

更改浏览器URL时，不会导致整页重新加载。要在更改URL后重新加载页面，请使用较低级别的API $window.location.href.

阅读更多

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

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