Question

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

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视图。所以就像这样

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

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

2 个答案: