Question

我是angularjs的新手，我需要的是在角度UI路由器中构建动态路由机制。我有三个模块，如文档，任务，仪表板，并在每个模块中有各种视图。请查看我尝试过的内容并提出解决方案。

app.js

var app= angular.module('myApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home.documentTree', {
      url: '/documentTree',
      views: {
        'main' :{
          templateUrl: "app/documents/views/documentTree.html",
          controller: 'documentCtrl',
          controllerAs: 'documentCtrl'
        }
      }
    })

    .state('home.documents', {
      url: '/documents',
      views: {
        'main' :{
          templateUrl: "app/documents/views/documentList.html",
          controller: 'documentCtrl',
          controllerAs: 'documentCtrl'
        }
      }
    })

    .state('home.documentDetails', {
      url: '/documentDetails',
      views: {
        'main' :{
          templateUrl: "app/documents/views/documentDetails.html",
          controller: 'documentCtrl',
          controllerAs: 'documentCtrl'
        }
      }
    })
$urlRouterProvider.otherwise('login');

});

我的html页面摘录如下：

<a ui-sref="home.documentTree">Document Tree</a>
<a ui-sref="home.documents">Document Lists</a>
<a ui-sref="home.documentDetails">Document Deatils</a>

我必须将上述三个文档路由概括为一个带有动态参数的路径。

为此，我尝试了以下方法：

<a ui-sref="home.:documents.:documentTree">Document Tree</a>

.state('home.:folder.:action', {
      url: 'home/:folder/:action',
      templateUrl: ['$stateParams', function ($stateParams) {
        return '/app/'+ $stateParams.folder+'/' + $stateParams.action + '.html';
      }],
      controller: 'documentCtrl',
      controllerAs: 'documentCtrl',
    })

但似乎没有正常工作。请提出您的想法。

Answer 1

最后我得到了解决方案！

Route:
    .state('home.documents', {
          url: '/:folder/:action',
          views: {
            'main' :{
              templateUrl: function($stateParams) {
                return 'app/' + $stateParams.folder + '/views/' + $stateParams.action + '.html';
              },
              controller: 'documentCtrl',
              controllerAs: 'documentCtrl'
            }
          }
        })

Html Code :

    <a ui-sref="home.documents({folder:'documents',action:'documentTree'})">Document tree</a>

试试吧。

Angular-UI路由器 - 如何创建动态路由

1 个答案: