使用UI路由器时，Navbar会自动复制

Question

我需要让导航栏包含两个子视图的链接：index.file和index.stats但是当其中一个点击时，新的导航栏会出现在里面。如何解决？

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

    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state('index', {
            url: '',
            templateUrl: "../../index.html",
            controller: "Controller"
    })
        .state('index.file', {
            templateUrl: "../js/views/file.html"
    })
        .state('index.stats', {
            templateUrl: "../js/views/stats.html"
    })
});

的index.html

<div class="container">
    <nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li class="active"><a ui-sref="index.file">File</a></li>
            <li class="active"><a ui-sref="index.stats">Stats</a></li>
        </ul>
    </nav>


    <div ui-view></div>

</div>

Answer 1

我知道你的问题已经解决，但这可能有助于其他人。

通常，当您尝试登录到包含其他html页面的相同基本html时，会发生路由重复。

E.g : If my index.html has something like this
     <div ng-include="navbar.html"></div>
     <div ui-view></div>

    In the navbar.html, you try to do the following
    <a ui-sref="index">index</a>
    $stateprovider.state='index',{
    url:'/index', template: 'index.html'});

    Then the index.html would be rendered with a duplicate view with a self reference of itself. To solve the problem, avoid including the same template. (Its better to always have home.html/landing.html saperated from index.html)