Javascript 符合路线参数的角度js动态模板

这是我的路线代码

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

.state（'app.single'{
url:“/playlists/：playlistId”，
观点：{
“菜单内容”：{
templateUrl:“templates/*****.html”，
控制器：“播放控制”
}
} 
});

---

如何实现此方法？

您可以使用

stateparms

实现此目的：

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

---

您可以为此使用

stateparms

：

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

试试这个

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

试试这个

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

这是你想要的

这是一种良好的做法吗？

答案是否定的

您直接传递路由参数值以生成模板url，但若用户提供了错误的路由参数，这将导致应用程序UI中断

更好的方法是使用switch case生成模板url

视图：{
“菜单内容”：{
templateUrl:函数（$stateParams）{
var参数=0；
开关（$stateParams.playlyid）{
案例1：
参数=1；
打破
案例2：
参数=2；
打破
违约：
参数=0
}
返回“templates/”+param+“.html”；
},
控制器：“播放控制”
}
}

这是你想要的

这是一种良好的做法吗？

答案是否定的

您直接传递路由参数值以生成模板url，但若用户提供了错误的路由参数，这将导致应用程序UI中断

更好的方法是使用switch case生成模板url

视图：{
“菜单内容”：{
templateUrl:函数（$stateParams）{
var参数=0；
开关（$stateParams.playlyid）{
案例1：
参数=1；
打破
案例2：
参数=2；
打破
违约：
参数=0
}
返回“templates/”+param+“.html”；
},
控制器：“播放控制”
}
}

您好，我只是一个初学者，我无法理解您的第二种方法。我将使用您的第一种方法，似乎它能工作，谢谢第二种方法只是使用基于播放列表id的开关盒，如果播放列表id错误，那么它将设置默认id以避免中断您的应用程序您好，我只是一个初学者，我不明白你的第二种方法，我将使用你的第一种方法，似乎它的工作，谢谢第二种方法只是使用基于播放列表id的开关盒，如果播放列表id是错误的，那么它将设置默认id，以避免破坏你的应用程序