角JS動態模板爲每個路由參數

Question

這裏是我的路線代碼

.state('app.single', { 
    url: "/playlists/:playlistId", 
    views: { 
     'menuContent': { 
      templateUrl: "templates/playlist.html", 
      controller: 'PlaylistCtrl' 
     } 
    } 
}); 

我所要做的是：

.state('app.single', { 
    url: "/playlists/:playlistId", 
    views: { 
     'menuContent': { 
      templateUrl: "templates/**<<:playlistId>>**.html", 
      controller: 'PlaylistCtrl' 
     } 
    } 
}); 

我如何能做到這一點的方法嗎？

Answer 1

試試這個

.state('app.single', { 
url: "/playlists/:playlistId", 
views: { 
    'menuContent': { 
    templateUrl: function(params) { 
     return 'templates/' + params.playlistId + '.html' ; 
    } 
    controller: 'PlaylistCtrl' 
    } 
} 

Answer 2

可以使用stateParams此：

views: { 
    'menuContent': { 
     // Inject $stateParams to access the playlistId parameter 
     templateUrl: ["$stateParams", function ($stateParams) { 
      return "templates/" + $stateParams.playlistId + ".html"; 
     }], 
     controller: 'PlaylistCtrl' 
    } 
} 

Answer 3

這是你想要的。

views: { 
    'menuContent': { 
     templateUrl: function($stateParams) { 
      return "templates/" + $stateParams.playlistId + ".html"; 
     }, 
     controller: 'PlaylistCtrl' 
    } 
} 

它是好的做法呢？

答案是否定的。

您直接傳遞路由參數值以生成模板url，但如果用戶提供錯誤的路由參數，則會導致應用程序UI中斷。

更好的方法是使用開關盒來生成模板url。

 views: { 
 
     'menuContent': { 
 
     templateUrl: function($stateParams) { 
 
      var param = 0; 
 
      switch ($stateParams.playlistId) { 
 
      case 1: 
 
       param = 1; 
 
       break; 
 
      case 2: 
 
       param = 2; 
 
       break; 
 
      default: 
 
       param = 0 
 
      } 
 
      return "templates/" + param + ".html"; 
 
     }, 
 
     controller: 'PlaylistCtrl' 
 
     } 
 
    }