如何在AngularJS中实现携带变量参数的超链接页面跳转？

没问题，咱们可以通过两种简单的方式实现你要的效果，根据你的项目情况选就行：

方法一：直接拼接URL（快速实现） #

这种方法最直接，不需要额外依赖，直接在<a>标签的href属性里用Angular表达式拼接参数就行。把你原来的HTML代码里的<a>标签改成下面这样：

<tr data-ng-repeat="company in companyList">
  <td>
    <a href="/pages/company.html?companyId={{company.companyId}}"> {{company.companyId}} </a>
  </td>
  <td> {{company.legalName}} </td>
  <td> {{company.dbaName}} </td>
  <td> {{company.formation}} </td>
</tr>

这样点击链接时，就会自动跳转到company.html并带上对应的companyId参数了。

方法二：使用AngularJS的$location服务（更符合Angular规范） #

如果你的项目是单页应用，用了Angular的路由（比如ngRoute），推荐用$location服务来处理跳转，这样更符合Angular的设计思路。

步骤1：在控制器中注入$location并添加跳转函数 #

修改你的AngularJS函数，注入$location并新增一个跳转方法：

$scope.findAllCompanies = function() { 
  $http.get('http://blahblablah/company/all'). 
  then(function(response) { 
    $scope.companyList = response.data; 
  }); 
};

// 新增跳转函数
$scope.goToCompanyDetail = function(companyId) {
  // 跳转到目标页面并携带参数
  $location.path('/pages/company').search({companyId: companyId});
};

步骤2：修改HTML中的链接 #

把<a>标签的href替换成ng-click事件，同时可以把href设为javascript:void(0)避免默认跳转行为：

<tr data-ng-repeat="company in companyList">
  <td>
    <a href="javascript:void(0)" ng-click="goToCompanyDetail(company.companyId)"> {{company.companyId}} </a>
  </td>
  <td> {{company.legalName}} </td>
  <td> {{company.dbaName}} </td>
  <td> {{company.formation}} </td>
</tr>

补充：如果用了UI-Router #

要是你的项目用的是ui-router，可以用$state.go来跳转，代码类似：

// 控制器中注入$state
$scope.goToCompanyDetail = function(companyId) {
  $state.go('company', {companyId: companyId});
};

对应的路由配置里要定义好参数，比如：

$stateProvider.state('company', {
  url: '/pages/company?companyId',
  templateUrl: 'pages/company.html'
});

内容的提问来源于stack exchange，提问作者Sikandar Sahab