如何在$ stateProvider中创建复合路线

debugcn 发表于 Dev

用户Cybermerlin

如果我转到/ settings / wizard / hv，则只会看到“设置”页面。我究竟做错了什么？我在页面button.handler上有页面：“设置”网址：“ / settings”>转到网址：“ / settings / wizard”

我有以下代码：

    $stateProvider
            .state('settings', {
                url: '/settings',
                template: '<div>Settings panel with fields</div>',
                title: 'Конфигурация',
                controller: function(){
                    console.log('controller settings')
                }
            })

            .state('settings.wizard', {
                url: '/wizard',
                abstract: true,
                template: '<ui-view></ui-view>',
                title: 'Мастер настройки',
                /** @ngInject */
                controller: function($state, $scope, $controller){
                    console.log('controller Wizard');
                    if($scope.mode == 'vw'){
                        $state.go('settings.wizard.vw')
                    }else{
                        $state.transitionTo('settings.wizard.hv')
                    }
                }
            })

            .state('settings.wizard.hv', {
                url: '/hv',
                parent: 'settings.wizard',
                templateUrl: 'app/plugins/settings/wizard/tpl/wizard.html',
                title: 'Мастер настройки',
                /** @ngInject */
                controller: function ($controller, $scope) {
                    console.log('controller wizard/hv')
                    $scope.mode = 'hv';
                    var ctrl = $controller('Settings.Wizard');
                    ctrl.setMode('hv');
                },
                controllerAs: 'wizard'
            })
            .state('settings.wizard.vw', {
                url: '/vw',
                // parent: 'settings.wizard',
                templateUrl: 'app/plugins/settings/wizard/tpl/wizard.html',
                title: 'Мастер настройки',
                /** @ngInject */
                controller: function ($controller, $scope) {
                    console.log('controller wizard/vw')
                    $scope.mode = 'hv';
                    var ctrl = $controller('Settings.Wizard');
                    ctrl.setMode('vw');
                },
                controllerAs: 'wizard'
            });

在页面“ / settings / wizard / hv”上，我有一些子页面和视图

<div>
  settings > wizard > hv
  <input />
  <ui-view></ui-view>
  <button onclick="$state.go('settings.wizard.hv.servers')" >go to servers</button>
</div>

金祖国

首先，尝试将ui-view添加到您的settings状态模板中：

$stateProvider
        .state('settings', {
            url: '/settings',
            template: '<section><div>Settings panel with fields</div><div ui-view></div></section>',
            title: 'Конфигурация',
            controller: function(){
                console.log('controller settings')
            }
        })

子状态需要一个可渲染的点。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。