如何根據$ stateParams中的參數使用ui-router切換不同的模板？

我正在用Angularjs和ui-router構建一個應用程序。我的結構是一個像這樣的嵌套狀態。

.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; 
})

當資源是「位置」和別的東西，如果不同。（此解決方案不起作用）。

如果你有想法解決這個問題？我在聽。

來源

2015-12-10 Okyne

的[這]（可能的複製http://stackoverflow.com/questions/28266261/ angular-ui-router-dynamic-create-template-using-stateparams-and-nested-temp） – manishrw

@manishrw。我已經看過這篇文章，但這並不是我期待的。就我而言，嵌套視圖的使用比專業人士有更多的缺點。 – Okyne

對於您的狀態上有條件地將controller的狀態，你應該有使用controllerProvider選項，而不是controller，基本上thta將爲該狀態恢復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 
     } 
     } 

})

來源

2015-12-10 09:20:14

完美的解決方案！ THX Pankaj – Okyne

@Okyne很高興幫助你..謝謝:) –

如何根據$ stateParams中的參數使用ui-router切換不同的模板？

回答

相關問題