Angular ui 路由器状态 - 具有相同模板和控制器的多个状态

2024-06-26

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

$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: {
                .....
                .....
            }
        })

有什么帮助或建议吗?


每个状态都需要有自己的定义.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: {
            .....
            .....
        }
    })

虽然代码并不简洁或高效,因为您必须声明每个状态上使用的控制器和部分,但这是必要的,因为每个状态都需要自己的.state() method

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular ui 路由器状态 - 具有相同模板和控制器的多个状态 的相关文章

随机推荐