不能在angular ui.router中的子状态之间切换

cannot switch between child state in angular ui.router

本文关键字：状态 之间 angular ui router 不能      更新时间：2023-09-26

以下是我的代码及其依存关系。我无法从nav4的child1切换到child2，或child3, url改变，但视图没有，但点击任何一个子，然后刷新浏览器后加载状态的内容。

<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例子

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

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

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

这里不需要显示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;
})
相关文章：