Question

有人可以帮我解决这个问题。

    .state('home',{
        url:'home',
        controller: 'mainCtrl',
        templateUrl: 'index.html'
    })

    .state('home.profile',{
        url:'/profile',
        controller: 'proCtrl',
        templateUrl: 'profile.html'
    })

    .state('home.category',{
        url:'/category',
        controller: 'cateCtrl',
        templateUrl: 'category.html'
    })

我的索引页面是这样的

<div class="col-sm-12 no-padding">
    <div class="col-sm-3 hidden-xs">
        <div class="col-xs-12">
            <ul class="nav panel-group rm-border">
                <li>
                    <a click-toggle ui-sref-active="active" class="row" ui-sref="home.profile">Profile</a>
                </li>
                <li>
                    <a click-toggle ui-sref-active="active" class="row" ui-sref="home.category">category</a>
                </li>
            </ul>
        </div><br clear="all">
    </div>
    <div class="col-sm-9 no-padding">
        <div class="row panel-heading rm-border no-margin">
            <h4 class="panel-title"> {{title}}</h4>
        </div>
        <div class="row no-margin" ui-view></div>
    </div>
</div>

我想要一种情况，我可以加载index.html，并在点击我的根“/ home”路线时加载另一个模板。

Answer 1

您需要让Home和category页面具有此类布局

HOME

<div> 
show some cool things
</div>
<div ui-view></div>

使用ui-router在angularjs中的根路由中加载两个模板

2 个答案: