Javascript 使用angular ui路由器的带参数的动态templateUrl
我有一个路径来处理创建、修改、查看和用户列表,如下所示:Javascript 使用angular ui路由器的带参数的动态templateUrl,javascript,angularjs,angular-ui-router,Javascript,Angularjs,Angular Ui Router,我有一个路径来处理创建、修改、查看和用户列表,如下所示: angular .module('abcApp', ['ui.router']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('user.add', { url: '/mgt/user/add', templateUrl: 'views/mgt_user/add.htm
angular
.module('abcApp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('user.add', {
url: '/mgt/user/add',
templateUrl: 'views/mgt_user/add.html',
controller: 'MgtUserCtrl'
})
.state('user.view', {
url: '/mgt/user/view/:userId',
templateUrl: 'views/mgt_user/view.html',
controller: 'MgtUserCtrl'
})
.state('user.list', {
url: '/mgt/user/list',
templateUrl: 'views/mgt_user/list.html',
controller: 'MgtUserCtrl'
});
});
我想使用一条路径,在那里我可以将模式作为参数传递,并获得正确的模板URL
:
angular
.module('abcApp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('userMangement', {
url: '/mgt/user/:mode/:userId',
templateUrl: 'views/mgt_user/' + $routeParams.mode + '.html',
controller: 'MgtUserCtrl'
});
});
模式可以是:查看
,编辑
,列表
有办法做到这一点吗?您可以使用templateProvider
$stateProvider
.state('userManagement', {
url: '/mgt/user/:mode/:userId',
controller: 'MgtUserCtrl',
templateProvider: ['$route', '$templateCache', '$http', function($route, $templateCache, $http) {
var url = '/views/mgt_user/' + $route.current.params.mode + '.html';
$http.get(url, {cache: $templateCache}).then(function(html) {
return html;
});
}]
})
您不能在此处使用$routeparams,因为$routeChangeSuccess事件后,$routeparams可用。您可以使用templateProvider
$stateProvider
.state('userManagement', {
url: '/mgt/user/:mode/:userId',
controller: 'MgtUserCtrl',
templateProvider: ['$route', '$templateCache', '$http', function($route, $templateCache, $http) {
var url = '/views/mgt_user/' + $route.current.params.mode + '.html';
$http.get(url, {cache: $templateCache}).then(function(html) {
return html;
});
}]
})
您不能在此处使用$routeparams,因为$routeChangeSuccess事件后,$routeparams可用