Bootstrap data-spy ="affix"无法处理Angular View更改

Question

我正在试图找出为什么affix当我改变我的Angular视图时我的面板不会保持不变.

我已将affix属性直接添加到第一页的面板(详细信息),并将其保留在数据间谍中仅在第二页(航班)中.

在一个完整的网络版本中,如果我刷新航班页面,突然启动词缀,并在滚动时保持放置,但如果我只是使用Angular导航到页面则不会.

当我在视图之间导航时,看起来这个词缀没有被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:在单页面应用程序中不会触发粘贴

但我无法弄清楚如何将这个应用于我的问题......

任何帮助都会很棒!

Answer 1

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

这是一个有用的Stack Overflow帖子,我找到了更多解释和示例:Angular ui-utils scrollfix.

Answer 2

如果你不想使用UI Bootstrap或UI Utils来支持普通的旧Bootstrap 3附件,那么这个词缀指令包装在我的单页角度应用程序上对我有用.我正在使用AngularUI路由器.

第一次加载指令时应用词缀.然后用它清除它$stateChagneSuccess:$element.removeData('bs.affix').removeClass('affix affix-top affix-bottom');如下所示:重置/更改bootstrap词缀的偏移量,然后重新应用它.让我知道,如果我在这里做的任何事都非常难看,虽然我喜欢简单,我喜欢利用默认的Bootstrap JS lib.

myApp.directive('affix', ['$rootScope', '$timeout', function($rootScope, $timeout) {
    return {
        link: function($scope, $element, $attrs) {

            function applyAffix() {
                $timeout(function() {                   
                    $element.affix({ offset: { top: $attrs.affix } });
                });
            }

            $rootScope.$on('$stateChangeSuccess', function() {
                $element.removeData('bs.affix').removeClass('affix affix-top affix-bottom');
                applyAffix();
            });

            applyAffix();

        }
    };
}]);

Answer 3

它不起作用，因为不会在绑定的词缀上触发特定事件。在单页面应用程序中，就像您的情况一样，页面仅加载一次，因此绑定到页面加载和类似事件的任何逻辑都会失败。如果您重新加载页面，一切都会正常。

解决办法是采用有角度的方式。其中一条评论建议尝试使用 Angular-strap，因为它有一个用于完全相同目的的 Affix 指令。

我遇到过类似的情况，最终使用了MacGyver它效果非常好并且易​​于使用。