$ stateProviderで複合ルートを作成する方法

Question

私が/ settings/wizard/hvに行くと、設定ページしか表示されません。私は何を間違えているのですか？ 私はページがあります。 "設定" URL： '/設定' ページbutton.handler上> URLにアクセスしてください。ページ上

$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' 
      }); 

'： '/設定/ウィザード'

が、私はこのコードを持っています/設定/ウィザード/ HV」私はいくつかのサブページおよびビュー

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

Answer 1

まずを持って、あなたのsettings状態テンプレートにUIビューを追加しよう：

$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') 
      } 
     }) 

子どもの州でレンダリングする場所が必要です。