Question

这是我的路线代码

deptno
comm
...
ename
empno

我要做的是：

.state('app.single', {
    url: "/playlists/:playlistId",
    views: {
        'menuContent': {
            templateUrl: "templates/playlist.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

这就是你想要的。

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

这是好的做法吗？

答案是否定的。

您正在直接传递路由参数值以生成模板URL但如果用户提供错误的路由参数，这将导致中断应用程序UI。

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

＆＃13;

     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'
       }
     }

＆＃13;

Answer 3

您可以使用stateParams：

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

根据路径参数的角度js动态模板

3 个答案: