Три уровня вложенных маршрутов в angular -ui-router

Я пытаюсь запустить мой вложенный маршрут, но это дает мне трудное время в течение двух дней: (

один уровень работает отлично

два уровня отлично работают

три уровня не работают!

Кто-нибудь может помочь мне?

Заранее спасибо

angular.module('settings', []).config(['$stateProvider', '$routeProvider', '$urlRouterProvider', function($stateProvider, $routeProvider, $urlRouterProvider) {
    $stateProvider
        .state('settings', {
            url: '/settings',
           template:"Settings",
            controller: function(){
                console.log('settings');
            }
        }).
        state('settings.branch', {
            url: '/{branchId:[0-9]{1,8}}',
            template:"Branch",
            controller: function(){
                console.log('branch');
            }
        }).
        state('settings.branch.prop', {
            url: '/prop',
            template:"Property",
            controller: function(){
                console.log('property');
            }
        });
}]);

'/settings' работает

'/settings/1234' работает

'/settings/1234/prop' не работает, всегда возвращайте состояние "Branch"

Ответ 1

Я думаю, вы не объявили ui-view в шаблоне Branch

Ответ 2

У меня была такая же проблема. Для settings.branch.prop попробуйте установить url на:

url: '/{branchId:[0-9]{1,8}}/prop'

Ответ 3

У нас возникла аналогичная проблема. Просто нашел решение (не очень красивое мнение)

Итак, мы имеем

/b2c/applicationShow --> applicationShowController (b2c.applicationShow) with an /:id 

/b2c/applicationShow/9238490392084/details --> detailsController (b2c.applicationShow.details) 

/b2c/applicationShow/9238490392084/details/someApp --> someAppController (b2c.applicationShow.details.someApp) 

/b2c/applicationShow/9238490392084/details/someApp/someTab --> this has no controller, only declare the previous one as parent.

Итак, как мы перешли от /b 2c/applicationShow к /b 2c/applicationShow/9238490392084/details/someApp/someTab (есть таблица, в которой перечислены все приложения, и щелкните ссылку, чтобы привести вас полностью к этой конкретной вкладке)

Мы отправляем их один за другим.

$state.go(b2c.applicationShow , {id: 9238490392084})

Затем в detailController

$state.go(b2c.applicationShow.details.someApp);

Затем в someAppController

$stage.go(b2c.applicationShow.details.someApp, {tab: someTab});

В основном конечный автомат будет использовать последний путь, добавив затем продолжить. Ну, как я уже сказал, это было некрасиво, но он выполнил свою работу. Надеюсь, поможет.

Ответ 4

Попробуйте обернуть div с атрибутом ui-view вокруг содержимого ветвей, например,

 <div ui-view> 
     branch content goes here .....
     ......

 </div>

сделал трюк для меня!