如何隐藏浏览器左下角显示的URL？AngularJS链接问题求助

方法一：修复锚点标签的跳转逻辑（保留a标签结构） #

你之前遇到点击都跳最后一个URL的问题，是因为原生onclick绑定方式没有形成独立作用域，循环结束后所有点击事件都引用了最后一个login对象。改用AngularJS的ng-click可以解决这个问题，同时隐藏浏览器左下角的URL显示：

1. 修改HTML模板，去掉ng-href，将href设为javascript:void(0)（避免默认URL显示），并绑定ng-click事件传递当前login对象：

<a class="btn btn-block btn-lg" ng-class='login.anchorClass' href="javascript:void(0)" ng-click="navigateToLogin(login)">
  <img src="{{login.file_name}}"/>
  {{login.name}}
</a>

2. 在对应控制器中注入$window服务，实现跳转方法：

angular.module('yourAppName').controller('YourController', ['$scope', '$window', function($scope, $window) {
  $scope.navigateToLogin = function(loginItem) {
    $window.location.href = loginItem.idp_authnrequest_url;
  };
}]);

方法二：改用按钮标签实现（更简洁的方案） #

按钮标签本身不会触发浏览器的URL预览，直接复用你的样式并绑定ng-click即可：

1. 替换锚点为按钮标签：

<button class="btn btn-block btn-lg" ng-class='login.anchorClass' ng-click="navigateToLogin(login)">
  <img src="{{login.file_name}}"/>
  {{login.name}}
</button>

2. 控制器的跳转方法和上面完全一致，无需额外修改。

原理说明 #

• 使用ng-click代替原生onclick，AngularJS会为每个循环项的点击事件绑定当前的login对象，不会出现闭包导致的变量引用错误。
• 去掉ng-href或使用按钮标签，浏览器就不会在左下角显示目标URL，满足需求。

内容的提问来源于stack exchange，提问作者vicky sharma