AngularJS单状态多URL配置求助及单状态多控制器问题咨询

首先得说，你现在的代码有个关键问题：重复定义了同一个状态名MasterUISmartReport.EngineeringChangesReport。UI-Router里状态名是唯一标识，后面的定义会直接覆盖前面的，所以你现在的写法根本达不到“同一个状态对应多个URL/控制器”的效果。

下面分两种常见场景给你对应的解决方案：

场景1：同一个状态对应多个URL，共用控制器和模板 #

如果只是想让多个不同的URL都指向同一个页面（相同控制器+模板），直接把url设置为数组就行，非常简单：

angular.module('MasterUISmartReportModule')
.config(['WcTranslateConfiguratorServiceProvider', '$urlRouterProvider', '$stateProvider', 
function (WcTranslateConfiguratorServiceProvider, $urlRouterProvider, $stateProvider) {
  $stateProvider
  .state('MasterUISmartReport', {
    'abstract': true,
    url: '/MasterUISmartReport',
    templateUrl: 'MasterUISmartReport/MasterUISmartReportTemplate.html',
    controller: 'MasterUISmartReportController',
    controllerAs: 'MasterUISmartReportController'
  })
  .state('MasterUISmartReport.EngineeringChangesReport', {
    // 用数组定义多个URL，都对应这个状态
    url: ['/EngineeringChangesReport', '/ManualEngineeringChangesReport'],
    templateUrl: 'MasterUISmartReport/states/EngineeringChangesReport/BrokenEngineeringTemplate.html',
    controller: 'EngineeringChangesController',
    controllerAs: 'EngineeringChangesController',
    parent: 'MasterUISmartReport'
  });
}]);

这样访问/MasterUISmartReport/EngineeringChangesReport和/MasterUISmartReport/ManualEngineeringChangesReport都会加载同一个状态的内容。

场景2：同一个状态对应多个URL，不同URL用不同控制器/模板 #

如果需要不同的URL对应不同的控制器和模板，但又想归为同一个状态（比如共享父状态的逻辑、保持状态继承关系），可以用controllerProvider和templateUrlProvider动态返回对应内容：

angular.module('MasterUISmartReportModule')
.config(['WcTranslateConfiguratorServiceProvider', '$urlRouterProvider', '$stateProvider', 
function (WcTranslateConfiguratorServiceProvider, $urlRouterProvider, $stateProvider) {
  $stateProvider
  .state('MasterUISmartReport', {
    'abstract': true,
    url: '/MasterUISmartReport',
    templateUrl: 'MasterUISmartReport/MasterUISmartReportTemplate.html',
    controller: 'MasterUISmartReportController',
    controllerAs: 'MasterUISmartReportController'
  })
  .state('MasterUISmartReport.EngineeringChangesReport', {
    // 定义多个URL
    url: ['/EngineeringChangesReport', '/EngineeringChangesReport/Manual'],
    // 动态返回控制器
    controllerProvider: function($location) {
      // 根据当前路径判断返回哪个控制器
      if ($location.path().includes('/Manual')) {
        return 'ManualEngineeringChangesController'; // 手动替换场景的控制器
      } else {
        return 'EngineeringChangesController'; // 默认控制器
      }
    },
    // 动态返回模板
    templateUrlProvider: function($location) {
      if ($location.path().includes('/Manual')) {
        return 'MasterUISmartReport/states/EngineeringChangesReport/ManualyReplaceSmartTemplate.html';
      } else {
        return 'MasterUISmartReport/states/EngineeringChangesReport/BrokenEngineeringTemplate.html';
      }
    },
    // 统一控制器别名，避免模板里的冲突
    controllerAs: 'vm',
    parent: 'MasterUISmartReport'
  });
}]);

另外，你也可以用URL参数来区分（更灵活），比如把URL设为/EngineeringChangesReport?type，然后在provider里根据$stateParams.type的值来切换控制器和模板，核心逻辑和上面一致。

最后提醒一下：如果用动态控制器，要确保所有用到的控制器都已经在模块中注册好了，不然会报错哦。

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