AngularJS ui-router动态生成链接href始终为当前URL问题求助

嘿，我之前在用ui-router做项目的时候也碰到过几乎一模一样的问题，咱们一步步来把它搞定！

首先，你遇到的核心问题是：用ng-repeat结合ui-sref生成的链接，href全指向当前页面URL，这大概率是因为ui-sref没有使用完整的状态路径导致的。

问题根源分析 #

你提到数组里的值是父状态user的子状态，但如果模板里的ui-sref只写了数组项（比如ui-sref="{{item}}"），ui-router会去查找全局的状态名，而不是user的子状态。当找不到对应全局状态时，它就会默认指向当前激活的状态，也就是你看到的所有href都是/user/home。

解决方案步骤 #

1. 确保数组中的子状态名与配置完全匹配

先检查你的$scope.menu_items数组内容，必须和$stateProvider中定义的user子状态名完全一致（包括大小写）。比如你配置的子状态是：

$stateProvider
  .state('user', { abstract: true, url: '/user' })
  .state('user.Home', { url: '/home', templateUrl: 'home.html' })
  .state('user.Profile', { url: '/profile', templateUrl: 'profile.html' })
  .state('user.Settings', { url: '/settings', templateUrl: 'settings.html' });

那你的数组应该是：

$scope.menu_items = ['Home', 'Profile', 'Settings'];

2. 在模板中拼接完整的状态路径

在ng-repeat的<a>标签里，ui-sref需要写成父状态+子状态的完整路径，用表达式拼接：

<a ng-repeat="item in menu_items" ui-sref="user.{{item}}" class="menu-link">{{item}}</a>

这样ui-router就能正确识别每个链接对应的完整状态，生成正确的href了。

3. 验证状态是否存在（可选排查步骤）

如果还是有问题，可以在控制器里用$state.get()验证状态是否存在，避免拼写错误：

app.controller('YourController', function($scope, $state) {
  $scope.menu_items = ['Home', 'Profile', 'Settings'];
  
  // 循环验证每个状态是否存在
  $scope.menu_items.forEach(function(item) {
    const fullStateName = 'user.' + item;
    if (!$state.get(fullStateName)) {
      console.warn(`警告：状态 ${fullStateName} 未定义！`);
    }
  });
});

4. 确认html5Mode配置的完整性

你已经开启了$locationProvider.html5Mode(true)，记得在HTML头部加上<base href="/">，同时确保Express端的 fallback 配置正确（所有路由请求都返回index.html）——不过你说手动输入URL能正常加载，这部分应该没问题，但还是提一下以防万一。

为什么临时方案能用？ #

你用ng-href结合自定义states数组的方式，其实是手动拼接了URL路径，而ui-sref的优势是基于状态名管理，不需要硬编码URL，所以上面的方案能帮你回到ui-sref的正确用法上。

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