如何使用 ui-router 根据 $stateParams 中的参数在不同模板之间切换？

Question

我正在开发一个带有 Angularjs 和 ui 路由器的应用程序。我的结构是一个像这样的嵌套状态。

.state('ls.resource', {
  url : '/:resource',
  abstract: true,
  template: "<div ui-view></div>"
})
  .state('ls.resource.id', {
    url: "/{id:int}",
    abstract: true,
    template: '<div ui-view ></div>'
  })
    .state('ls.resource.id.view', {
      url: '/{id:int}',
      templateUrl: '/view_location.html',
      controller: '...'
    })

现在，我想在不同的模板之间切换，但处于相同的状态。例如：

.state('ls.resource.id', {
  url: '/',
  templateUrl: function($stateParams) {
        switch ($stateParams.resource) {
          case 'location': 
             return '/view_location.html';
             break;
      controller: function($stateParams) {
        switch ($stateParams.resource) {
          case 'location': 
             return 'LocationCtrl';
             break;
})

当资源为 'location' 时，如果不同则为其他内容。（此解决方案无效）。

如果您有解决此问题的想法？我在听。

Answer 1

要在您的州有条件地为州添加 controller，您应该在那里使用 controllerProvider 选项而不是 controller，基本上会 return controller 该州的名称。

还要确保您应该使用 }

关闭 switch、templateUrl 和 controller 功能

代码

.state('ls.resource.id', {
  url: '/',
  templateUrl: function($stateParams) {
         switch ($stateParams.resource) {
           case 'location': 
             return '/view_location.html';
             break;
           default: 
             return '/view_default.html';
         }
      },
      controllerPrivider: function($stateParams) {
        switch ($stateParams.resource) {
          case 'location': 
             return 'LocationCtrl';
             break;
          defautlt:
             return 'SomeDefaultCtrl' //should return some controller name
        }
      }

})

如何使用 ui-router 根据 $stateParams 中的参数在不同模板之间切换？

How to switch between different templates depending on params in $stateParams with ui-router?

parameters

angularjs

angular-ui-router