无法在角度ui.router中的子状态之间切换

以下是我的代码及其codepen。我无法从nav4的child1切换到child2或child3，url更改，但视图没有，但点击任何孩子后，然后刷新浏览器加载状态的内容。无法在角度ui.router中的子状态之间切换

HTML

<nav class="advance-navbar"> 
       <div class="container-fluid"> 
        <ul class="nav navbar-nav adv-nav"> 
         <li class="dropdown active"> 
          <a ui-sref="nav1" class="dropdown-toggle"> <span>nav1</span></a> 
         </li> 
         <li class="dropdown"> 
          <a ui-sref="nav2" class="dropdown-toggle"><span>nav2</span></a> 
         </li> 
         <li class="dropdown"> 
          <a ui-sref="nav3" class="dropdown-toggle"><span>nav3</span></a> 
         </li> 

         <li class="dropdown"> 
          <a ui-sref="nav4" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">nav4 <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li><a ui-sref="nav4.child41">child1</a></li> 
           <li><a ui-sref="nav4.child42">child2</a></li> 
           <li><a ui-sref="nav4.child43">child3</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </nav>

var example = angular.module("example", ['ui.router']); 
example.config(function ($stateProvider, $urlRouterProvider) { 
$stateProvider 
      .state('nav1', { 
       url: '/nav1', 
       template: '<h1>{{stateurl}}</h1', 
       controller: 'dummyCtrl', 
       data : {elastic_index : 'nav1'} 
      }) 
      .state('nav2', { 
       url: '/nav2', 
       template: '<h1>{{stateurl}}</h1', 
       controller: 'dummyCtrl', 
       data : {elastic_index : 'nav2'} 
      }) 
      .state('nav3', { 
       url: '/nav3', 
       template: '<h1>{{stateurl}}</h1', 
       controller: 'dummyCtrl', 
       data : {elastic_index : 'nav3'} 
      }) 
      .state('nav4', { 
       url: '/nav4', 
       template: '<h1>{{stateurl}}</h1', 
       controller: 'dummyCtrl', 
       data : {elastic_index : 'nav4'} 
      }) 
      .state('nav4.child41', { 
       url: '/child41', 
       template: '<h1>{{stateurl}}</h1', 
       controller: 'dummyCtrl', 
       data : {elastic_index : 'child41'} 
      }) 
      .state('nav4.child42', { 
       url: '/child42', 
       template: '<h1>{{stateurl}}</h1', 
       controller: 'dummyCtrl', 
       data : {elastic_index : 'child42'} 
      }) 
      .state('nav4.child43', { 
       url: '/child43', 
       template: '<h1>{{stateurl}}</h1', 
       controller: 'dummyCtrl', 
       data : {elastic_index : 'child43'} 
      }); 

     $urlRouterProvider.otherwise('/nav1'); 
    }); 
    example.controller('dummyCtrl', function ($scope, $state){ 
     console.info($state) 
     $scope.stateurl= $state.current.data.elastic_index; 
    })

CodePen Example

编辑在实际的应用程序我有同样的templateURL文件在父和子状态

来源

2016-09-27 Rizwan Haider

在这里，你不需要证明nav4本身，所以要抽象。当其中一个子状态被激活时，抽象状态被隐式激活。当我们需要将一个url前置到所有需要插入模板的所有子状态url时，这是非常有用的，该模板具有子状态将填充的自己的ui-view。所以它会是这样的

var example = angular.module("example", ['ui.router']); 
example.config(function ($stateProvider, $urlRouterProvider) { 
$stateProvider 
    .state('nav1', { 
     url: '/nav1', 
     templateUrl: 'templates/dummy.html', 
     controller: 'dummyCtrl', 
     data: { 
      elastic_index: 'nav1' 
     } 
    }) 
    .state('nav2', { 
     url: '/nav2', 
     templateUrl: 'templates/dummy.html', 
     controller: 'dummyCtrl', 
     data: { 
      elastic_index: 'nav2' 
     } 
    }) 
    .state('nav3', { 
     url: '/nav3', 
     templateUrl: 'templates/dummy.html', 
     controller: 'dummyCtrl', 
     data: { 
      elastic_index: 'nav3' 
     } 
    }) 
    .state('nav4', { 
     abstract: true, 
     url: '/nav4', 
     template: '<ui-view/>', 
     controller: 'dummyCtrl', 
     data: { 
      elastic_index: 'nav4' 
     } 
    }) 
    .state('nav4.child41', { 
     url: '/child41', 
     templateUrl: 'templates/dummy.html', 
     controller: 'dummyCtrl', 
     data: { 
      elastic_index: 'child41' 
     } 
    }) 
    .state('nav4.child42', { 
     url: '/child42', 
     templateUrl: 'templates/dummy.html', 
     controller: 'dummyCtrl', 
     data: { 
      elastic_index: 'child42' 
     } 
    }) 
    .state('nav4.child43', { 
     url: '/child43', 
     templateUrl: 'templates/dummy.html', 
     controller: 'dummyCtrl', 
     data: { 
      elastic_index: 'child43' 
     } 
    }); 

$urlRouterProvider.otherwise('/nav1'); 
}); 

example.controller('dummyCtrl', function ($scope, $state) { 
console.info($state) 
$scope.stateurl = $state.current.data.elastic_index; 
})

来源

2016-09-28 08:09:40 Abdul

你需要添加<div ui-view></div>父模板，所以路由器将放置子视图有

看这里：http://codepen.io/anon/pen/ALrvPw

来源

2016-09-27 19:20:19 WalksAway

谢谢@WAlks为您的答复，它工作正常。但在我的实际应用程序中，我的所有状态（包括父项和子项）都具有相同的html，我该如何在该方案中实现它。 –

无法在角度ui.router中的子状态之间切换

回答

相关问题