Wie erstellt man zusammengesetzte Route in $ stateProvider

Question

Wenn ich zu/settings/wizard/hv gehe dann sehe ich nur Einstellungen Seite. Was mache ich falsch? Ich habe Seite: "Einstellungen" url: '/ Einstellungen' auf Seite button.handler> Gehe zu URL: '/ Einstellungen/Assistent'

Ich habe diesen Code:

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

auf Seite '/Einstellungen/Assistent/hv‘ich habe einige Unterseiten und Ansichten

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

Answer 1

Zunächst einmal versuchen, ui-Ansicht zu Ihrer settings Zustand Vorlage hinzufügen:

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

Untergeordnete Zustände erfordern einen Punkt zum Rendern.