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

Question

I'm using the following ui-router configuration.我正在使用以下 ui-router 配置。 So, when the user clicks on a tab, the tab is highlighted correctly as expected.因此，当用户单击选项卡时，该选项卡会按预期正确突出显示。 However, no tab is highlighted when the page first loads and the user has to click on a tab for its state to get activated.但是，当页面首次加载时没有突出显示选项卡，用户必须单击选项卡才能激活其状态。 I would like the home state to be the active tab when the page first loads.我希望主页状态在页面首次加载时成为活动选项卡。 How can I achieve this?我怎样才能做到这一点？

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

My HTML markup is:我的 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

Okay so I managed to figure out the issue.好的，所以我设法弄清楚了这个问题。 It was a syntax error at the third line which should change from这是第三行的语法错误，应该从

$urlRouterProvider.otherwise('home');

to到

$urlRouterProvider.otherwise('/');

I had thought that $urlRouter.otherwise() takes in the state as parameter.我原以为$urlRouter.otherwise()将状态作为参数。 It should in fact be the redirect url.它实际上应该是重定向 url。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-08-09 08:52:51

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-08-09 08:52:51

解决方案1
1 已采纳 2016-08-09 08:52:51