如何在Angular路由state中利用控制器变量设置页面标题？

嘿，针对你这个需求，我有两种实用方案，你可以根据项目实际情况选择：

方案一：直接在控制器内修改标题（最直接） #

既然$scope.companyname已经在surveysCtrl里可用了，咱们可以直接在控制器里操作页面标题，同时如果项目里其他模块依赖路由data中的pageTitle，也同步更新这个值：

首先确保控制器注入了$state（如果还没添加的话），然后加入以下代码：

app.controller('surveysCtrl', ['$scope', '$state', function($scope, $state) {
  // 假设这里已经完成了$scope.companyname的赋值（比如从接口获取或初始化）
  $scope.companyname = 'ABC Corp';

  // 拼接动态标题
  const dynamicPageTitle = `${$scope.companyname} Client Survey`;
  
  // 修改浏览器标签页的标题
  document.title = dynamicPageTitle;

  // 如果项目有其他地方依赖$state.current.data.pageTitle，同步更新该值
  $state.current.data.pageTitle = dynamicPageTitle;
}]);

这种方法简单直接，不需要改动路由配置，适合变量已在控制器内就绪的场景。

方案二：在路由resolve阶段预取数据并设置标题（体验更优） #

如果companyname需要从后端接口获取，那可以把数据获取逻辑放到路由的resolve里，这样能在页面加载前就拿到数据，提前设置好标题：

第一步：修改路由配置 #

在resolve中新增companyname的获取逻辑，保留原有的懒加载配置：

.state('access.surveys', {
  url: '/surveys',
  templateUrl: 'app/tpl/feedback/index.html',
  data: { pageTitle: 'XYZ Client Survey' },
  controller: 'surveysCtrl',
  resolve: {
    // 先获取公司名称数据
    companyname: ['$http', function($http) {
      // 替换成你的实际API请求地址
      return $http.get('/api/company/name').then(res => res.data);
    }],
    // 原有懒加载逻辑保持不变
    deps: ['$ocLazyLoad', function ($ocLazyLoad) {
      return $ocLazyLoad.load([], { insertBefore: '#lazyload_placeholder' })
        .then(function () {
          return $ocLazyLoad.load(['app/controllers/surveysCtrl.js']);
        });
    }]
  }
})

第二步：在控制器中接收数据并设置标题 #

把companyname作为依赖注入到控制器，再完成动态标题的设置：

app.controller('surveysCtrl', ['$scope', '$state', 'companyname', function($scope, $state, companyname) {
  $scope.companyname = companyname;
  const dynamicPageTitle = `${$scope.companyname} Client Survey`;
  
  document.title = dynamicPageTitle;
  $state.current.data.pageTitle = dynamicPageTitle;
}]);

这种方式能让用户打开页面时直接看到动态标题，体验更流畅。

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