角UI路由器状态 - 用相同的模板和控制器的多国 [英] angular ui router state - multiple states with same template and controller

问题描述

我在我的采用了棱角分明的UI路由器状态提供angularjs应用程序定义如下状态。而且，我想定义具有相同配置，即多个状态。用相同的模板和控制器。

I have states defined as below in my angularjs app using angular ui router state provider. And, I would like to define multiple states with the same configuration ie. with the same template and 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'
            }
          }
        })

是否有可能做这样的事情。

Is it possible to do something like

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

任何帮助或建议？

Any help or suggestions?

推荐答案

每个国家需要在它自己的 .STATE（）的方法来进行定义。你会碰到试图做到这一点，你上面列出的方式存在多个问题。最重要的将是URL。

Each state needs to be defined in it's own .state() method. You will run into multiple problems trying to do it the way you listed above. Most importantly would be the url.

您可以简单地做到这一点：

You can simply do this:

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

而在意义上的code未凝结或有效率，你必须声明控制器和每个国家的部分使用，它是必要的，因为每个国家需要自己的 .STATE（）法

这篇关于角UI路由器状态 - 用相同的模板和控制器的多国的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！