使用angular-ui的Bootstrap scrollspy

时间:2015-03-09 21:05:20

标签: javascript angularjs twitter-bootstrap scrollspy

我一直在试图让卷轴工作。我目前正在使用yeomans angular generatorangular-ui router进行一个项目搭建。使用任何数据间谍的东西,我似乎运气不好。

任何人都可以看看可能是什么原因?

代码段:

的index.html

<nav class="navbar navbar-fixed-top navbar-default">
    <div class="container">
        .. omitted
        <div id="char-nav" class="collapse">
            <ul class="nav nav-tabs">
                <li class=""><a href="#char-identity">Identity</a></li>
                <li class=""><a href="#char-attributes">Attributes</a></li>
                <li class=""><a href="#char-skills">Skills</a></li>
                <li class=""><a href="#char-spells">Spells</a></li>
                <li class=""><a href="#char-passives">Passives</a></li>
                <li class=""><a href="#char-equipment">Equipment</a></li>
                <li class=""><a href="#char-consumables">Consumables</a></li>
            </ul>
        </div>
    </div>
</nav>
...
<div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
            <my-notification></my-notification>
            <div ui-view></div>
        </div> 
...omitted

character.html

<div id="character-views" data-offset-top="0" data-spy="scroll" data-target="#char-nav">
    <div class="character-view" ng-include="'views/character/identity.html'"></div>
    <div class="character-view" ng-include="'views/character/attributes.html'"></div>
    <div class="character-view" ng-include="'views/character/skills.html'"></div>
    <div class="character-view" ng-include="'views/character/spells.html'"></div>
    <div class="character-view" ng-include="'views/character/passives.html'"></div>
    <div class="character-view" ng-include="'views/character/equipment.html'"></div>
    <div class="character-view" ng-include="'views/character/consumables.html'"></div>
</div>

角色页面是由几个部分构建的,这是我想要窥探的页面。

我的ng-includes列表中的任何页面都以这样的标题开头:

<header id="char-identity" class="character-view-header">Identity</header>
<hr>

1 个答案:

答案 0 :(得分:0)

AngularStrap project可以为您提供帮助。