css - Bootstrap data-spy ="affix"不适用于 Angular View 更改

标签 css angularjs twitter-bootstrap affix ng-view

我想弄清楚为什么当我更改 Angular View 时,我的 affix-ed 面板没有保持原样。

我已将词缀属性直接添加到第一页(详细信息)的面板中,并仅将其留在第二页(航类)的数据 spy 中。

在完整的网络版本中,如果我刷新航类页面,词缀会突然出现,并在我滚动时保持不变,但如果我只是使用 Angular 导航到该页面则不会。

当我在 View 之间导航时,Bootstrap 似乎没有将词缀添加到类中。

HTML:

<div class="panel panel-primary mySidebar" id="sidebar" 
    data-spy="affix" data-offset-top="0" data-offset-bottom="200">

CSS:

.mySidebar.affix {
    position: fixed;
    top: 250px;  
}

.mySidebar.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 450px;  
}

这是一个 Plunker..

http://plnkr.co/edit/S0Bc50?p=preview

我在这里发现了一个类似的问题:

Twitter Bootstrap: Affix not triggering in single page application

但我不知道如何将它应用到我这里的问题...

任何帮助都会很棒!

最佳答案

Angular UI Utils (不是 Angular UI Bootstrap,如评论中所述)有一个 Scrollfix 指令,可以用来代替 Affix。我遇到了与您相同的问题,即 Affix 在更改 View 后无法正常工作。我尝试将 Angular UI Scrollfix 添加到我的应用程序中,到目前为止它看起来可以满足我的需求。

这是我发现的一篇有用的 Stack Overflow 帖子,其中包含更多解释和示例:Angular ui-utils scrollfix .

关于css - Bootstrap data-spy ="affix"不适用于 Angular View 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23638925/

相关文章:

css - CSS编码在Accessibility中的作用是什么?

css - 有没有办法直接链接到这个 JS/CSS 页面上的特定内容?

javascript - 如何使用 $timeout 在指令渲染后调用 Controller 方法?

javascript - Bootstrap 弹出链接不起作用

javascript - 显示多张幻灯片,使用 Bootstrap 3.3.5 轮播移动一张

JavaScript 在 Mac 和 PC 上表现不同?我知道不应该

css 类不级联,在 anchor 标记上

javascript - AngularJS 没有使用 Websocket 更新数据绑定(bind)

javascript - 使用 Angular 将 Google 分析 ID 插入到脚本中

javascript - 在放置事件上启动 Bootstrap 模式