Question

我使用以下ui-router配置。因此，当用户单击选项卡时，选项卡会按预期正确突出显示。但是，首次加载页面时，不会突出显示任何选项卡，并且用户必须单击选项卡才能激活其状态。当页面首次加载时，我希望home状态成为活动选项卡。我怎样才能做到这一点？

 angular.module("app", ['app.home', 'app.page1', 'app.page2', 'app.page3'])

.config(function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('home');

$stateProvider

.state('home', {
    url: '/',
    views: {
        'MainContentPlaceHolder': {
            templateUrl: '../Home/_Layout.html'
        }
    }
})

.state('page1', {
    url: '/page1',
    views: {
        'MainContentPlaceHolder': {
            templateUrl: '../Page-1/_Layout.html'
        }
    }
})

.state('page2', {
    url: '/page2',
    views: {
        'MainContentPlaceHolder': {
            templateUrl: '../Page-2/_Layout.html'
        }
    }
})

.state('page3', {
    url: '/page3',
    views: {
        'MainContentPlaceHolder': {
            templateUrl: '../Page-3/_Layout.html'
        }
    }
});
})

我的HTML标记是：

<body>
<section id="NavBar">
    <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" ui-sref="home"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
            </div>
            <ul class="nav navbar-nav">
                <li ui-sref-active="active"><a ui-sref="home">Home</a></li>
                <li ui-sref-active="active"><a ui-sref="page1">Page 1</a></li>
                <li ui-sref-active="active"><a ui-sref="page2">Page 2</a></li>
                <li ui-sref-active="active"><a ui-sref="page3">Page 3</a></li>
            </ul>
        </div>
    </nav>
</section>
    <section id="ContentPlaceHolder" ui-view="MainContentPlaceHolder"></section>
</body>

Answer 1

好的，所以我设法弄明白了这个问题。这是第三行的语法错误，应该从

改变

$urlRouterProvider.otherwise('home');

到

$urlRouterProvider.otherwise('/');

我原以为$urlRouter.otherwise()将状态作为参数。它实际上应该是重定向网址。

如何激活角度ui-sref的页面加载状态？

1 个答案: