AngularJS+UI-Router：带锚点链接在新窗口打开失效问题求助

我之前也碰到过这个一模一样的问题，AngularJS的ui-sref在同一窗口下处理锚点完全正常，但加上target="_blank"打开新窗口时，锚点就直接被忽略了。核心原因是新窗口重新初始化应用时，路由完成后没有自动触发锚点的滚动行为，或者说ui-sref生成的URL在新窗口场景下，锚点参数没有被浏览器正确解析。

下面给你几个可行的解决方案：

方法一：用ng-href手动拼接URL和锚点 #

放弃ui-sref，直接用ng-href结合$state.href生成完整的带锚点的URL，这样新窗口打开时浏览器会自动识别锚点并滚动到对应位置：

<a ng-href="{{ $state.href('details', {'id': '12345'}) }}#parts" target="_blank"> to parts </a>

注意要确保你的模板能访问到$state服务——要么在控制器里把$state绑定到$scope，要么用$rootScope全局注入，或者用controllerAs语法时把$state挂到vm实例上。

方法二：在目标页面控制器手动处理滚动 #

如果一定要保留ui-sref的写法，可以在details状态对应的控制器里，等DOM完全渲染后手动查找锚点并触发滚动：

angular.module('yourApp').controller('DetailsController', function($scope, $stateParams, $timeout) {
  // 用$timeout确保DOM已经渲染完毕，能找到目标锚点元素
  $timeout(function() {
    const anchorId = $stateParams['#'];
    if (anchorId) {
      const anchorElement = document.getElementById(anchorId);
      if (anchorElement) {
        // 平滑滚动到锚点，也可以直接调用anchorElement.scrollIntoView()
        anchorElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  });
});

这个方法的核心是通过$stateParams获取你传入的锚点参数，然后手动触发浏览器的滚动行为。

方法三：完善state参数配置 #

先在state定义里明确声明锚点参数，确保它能被正确传递到新页面：

$stateProvider.state('details', {
  url: '/details/:id',
  params: {
    '#': { 
      value: null, 
      squash: true // 当参数为null时不显示在URL里
    }
  },
  templateUrl: 'details.html',
  controller: 'DetailsController'
});

然后再结合方法二的控制器代码，就能在新页面加载时自动滚动到指定锚点了。

至于为什么同一窗口下正常？因为同一窗口内，AngularJS的路由切换过程中会自动处理锚点的滚动逻辑，但新窗口是从头初始化整个应用，路由完成后不会自动触发这个滚动动作，所以需要我们手动干预。

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