ui-router嵌套状态超过两个级别

Question

我试图将状态嵌套在两个级别上，但我收到以下错误：

  

错误：无法解决＆＃39; purchases.inventory.create-move＆＃39;来自国家＆nbsp; purchase.inventory＆＃39;

以下是第一级和第二级路线：

(function () {
    'use strict';

    angular.module( 'app.purchases' )

        // Collect the ui-route states
        .constant( 'states', getRouteStates() )

        // Configure the ui-route states and state resolvers
        .config( [ '$stateProvider', '$urlRouterProvider', 'states', stateConfigurator ] );

    function stateConfigurator( $stateProvider, $urlRouterProvider, states ) {

        states.forEach( function ( state ) {

            $stateProvider.state( state.name, state.config );

        } );

        $urlRouterProvider.otherwise( "/" );

    }

    // Define the ui-route states
    function getRouteStates() {
        return [
            {
                name: 'purchases',
                config: {
                    url: '/compras',
                    views: {
                        'content-body': {
                            templateUrl: './modules/purchases/purchases-dashboard.view.html',
                            controller: 'PurchasesDashboardController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Compras'
                    }
                }
            },
            {
                name: 'purchases.inventory',
                config: {
                    url: '/movimientos',
                    views: {
                        'panel-body': {
                            templateUrl: './modules/purchases/inventory/inventory-dashboard-options.view.html',
                            controller: 'InventoryDashboardController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Inventario'
                    }
                }
            },
            {
                name: 'purchases.products',
                config: {
                    url: '/productos',
                    views: {
                        'panel-body': {
                            templateUrl: './modules/purchases/products/products-dashboard-options.view.html',
                            controller: 'ProductsDashboardController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Productos'
                    }
                }
            },
            {
                name: 'purchases.suppliers',
                config: {
                    url: '/proveedores',
                    views: {
                        'content-body': {
                            templateUrl: './modules/purchases/suppliers/suppliers-dashboard-options.view.html',
                            controller: 'SuppliersDashboardController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Proveedores'
                    }
                }
            }
        ];
    }

})();

以下是第三级路线（这些路线不起作用）：

(function () {
    'use strict';

    angular.module( 'app.purchases.inventory' )

        // Collect the ui-route states
        .constant( 'states', getRouteStates() )

        // Configure the ui-route states and state resolvers
        .config( [ '$stateProvider', '$urlRouterProvider', 'states', stateConfigurator ] );

    function stateConfigurator( $stateProvider, $urlRouterProvider, states ) {

        states.forEach( function ( state ) {

            $stateProvider.state( state.name, state.config );

        } );

        $urlRouterProvider.otherwise( '/' );

    }

    // Define the ui-route states
    function getRouteStates() {
        return [
            {
                name: 'pruchases.inventory.create-move',
                config: {
                    url: '/nuevo-movimiento',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/create-move/create-move.view.html',
                            controller: 'CreateMoveController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Nuevo Movimiento'
                    }
                }
            },
            {
                name: 'pruchases.inventory.list-moves',
                config: {
                    url: '/movimientos',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/read-moves/list-moves.view.html',
                            controller: 'ReadMovesController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Lista de Movimientos'
                    }
                }
            },
            {
                name: 'pruchases.inventory.detail-move',
                config: {
                    url: '/movimientos/:move_id/:move_date',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/read-moves/detail-move.view.html',
                            controller: 'ReadMovesController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Detalle'
                    }
                }
            },
            {
                name: 'pruchases.inventory.update-move',
                config: {
                    url: '/movimientos/:move_id/:move_date/actualizar',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/update-move/update-move.view.html',
                            controller: 'UpdateMoveController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Actualizacion'
                    }
                }
            }
        ];
    }

})();

在模板中我所做的是：

<a ui-sref="pruchases.inventory.create-move">Create Move</a>

ui-router是否支持超过两级嵌套路由？

Answer 1

我只是错误地填写了州名，这里是纠正的状态：

function getRouteStates() {
        return [
            {
                name: 'purchases.inventory.create-move',
                config: {
                    url: '/nuevo-movimiento',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/create-move/create-move.view.html',
                            controller: 'CreateMoveController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Nuevo Movimiento'
                    }
                }
            },
            {
                name: 'purchases.inventory.list-moves',
                config: {
                    url: '/movimientos',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/read-moves/list-moves.view.html',
                            controller: 'ReadMovesController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Lista de Movimientos'
                    }
                }
            },
            {
                name: 'purchases.inventory.detail-move',
                config: {
                    url: '/movimientos/:move_id/:move_date',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/read-moves/detail-move.view.html',
                            controller: 'ReadMovesController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Detalle'
                    }
                }
            },
            {
                name: 'purchases.inventory.update-move',
                config: {
                    url: '/movimientos/:move_id/:move_date/actualizar',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/update-move/update-move.view.html',
                            controller: 'UpdateMoveController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Actualizacion'
                    }
                }
            }
        ];
    }