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

Question

以下是我的代码及其 codepen 。我无法从 nav4 的 child1 切换到 child2 或 child3，url 改变但视图没有，但是在点击任何孩子然后刷新浏览器后会加载 state 的内容。

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>

JS

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 文件用于父子状态

Answer 1

你需要在父模板中添加<div ui-view></div>，这样路由器才会把子视图放在那里

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

Answer 2

这里不需要显示 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;
})