使用angular-ui-router配置参数

dynamic templateUrl with param using angular-ui-router

本文关键字：参数 配置 angular-ui-router 使用      更新时间：2023-09-26

我有一个路由来处理创建，修改，查看和用户列表，像这样:

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

我想使用一条路由，我可以传递mode作为参数并获得正确的templateUrl:

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

mode可以是:view, edit, list。

有办法做到这一点吗?

你可以使用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，因为$routeparams在$ routechangessuccess事件之后可用。

相关文章：