angularjs - angular ui 路由器状态 - 具有相同模板和 Controller 的多个状态

Question

我使用 angular ui 路由器状态提供程序在我的 angularjs 应用程序中定义了如下状态。而且，我想用相同的配置定义多个状态，即。使用相同的模板和 Controller 。

$stateProvider
        .state('parent', {
            templateUrl: 'parent.html',
            abstract: true,
            parent: 'apm'
        })
        .state('parent.list', {
            abstract: true,
            url: '/list',
            templateUrl: 'list.html',
            controller: 'ListCtrl'
        })

        .state('parent.list.closed', {
        url: '/q',
        templateUrl: 'closed.html'
        })

        .state('parent.list.details', {   // would like to have same template, controller on different state parent.details without list
            url: '/:id/:name',
            abstract: true,
            templateUrl: 'details.html',
            controller: 'DetailsCtrl',
            resolve: {
                .....
                .....
            }
        })
        .state('parent.list.details.data', { // would like to have same template, controller on different state parent.details.data without list
          url: '/details',
          views : {
            'view1' : {
              templateUrl : 'view1.html'
            },
            'view2' : {
              templateUrl : 'view2.html',
              controller : 'View2Ctrl'
            },
            'view3' : {
              templateUrl : 'view3.html'
            },
            'view4' : {
              templateUrl : 'view4.html'
            }
          }
        })

是否有可能做类似的事情

.state(['parent.list.details', 'parent.details'], {   
            url: '/:id/:name',
            abstract: true,
            templateUrl: 'details.html',
            controller: 'DetailsCtrl',
            resolve: {
                .....
                .....
            }
        })

任何帮助或建议？

Answer 1

每个状态都需要在它自己的 .state() 中定义方法。尝试按照上面列出的方式进行操作时，您会遇到多个问题。最重要的是网址。

你可以简单地这样做:

    .state('parent.list', {   
        url: '/list',
        abstract: true,
        templateUrl: 'details.html',
        controller: 'DetailsCtrl',
        resolve: {
            .....
            .....
        }
    .state('parent.list.details', {   
        url: '/:id/:name',
        abstract: true,
        templateUrl: 'details.html',
        controller: 'DetailsCtrl',
        resolve: {
            .....
            .....
        }
    })

虽然在您必须声明每个状态上使用的 Controller 和部分代码的意义上，代码并不简洁或高效，但这是必要的，因为每个状态都需要自己的 .state()方法