JavaScript：

Question

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

我已将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: Affix not triggering in single page application

但我无法弄清楚如何在我的问题中应用它...

任何帮助都会很棒！

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');清除它，如下所示：Resetting / changing the offset of bootstrap affix，然后重新应用它。让我知道，如果我在这里做的任何事都非常难看，虽然我喜欢简单，我喜欢利用默认的Bootstrap JS库。

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

我更喜欢挂钩原始data-spy="scroll"引导程序绑定 - 以便更好地从clickdummy迁移到生产 - 并将原始引导功能应用于它，因为Angular-UI（至少对我而言）是一个不可接受的混乱

(function () {
  'use strict';

  angular
    .module('app.core')
    .directive('spy', spy);


  function spy() {
    return {
      restrict: 'A',
      link: link
    };

    function link(scope, element, attrs) {

      // Dom ready
      $(function () {
        if (attrs.spy === 'affix') {
          $(element).affix({
            offset: {
              top: attrs.offsetTop || 10
              // bottom: attrs.offsetBottom || 10
            }
          });
        }
      });
    }
  }
})();

Answer 4

这是一个老问题，但我最近在将我的网站重写为AngularJS应用时偶然发现了它。我还使用了Bootstrap Affix插件（包括在滚动时更新活动类），并且无法找到与我正在寻找的工作完全相同的插件，因此我编写了自己的指令。

查看实际操作：http://bobbograph.com/#/api

注意：提供给指令的值是顶部偏移量。

JavaScript：

https://github.com/robertmesserle/Bobbograph/blob/v3/www/js/site.js#L102

app.directive('rmAffix', function ($window) {
  var body = document.body,
      win = document.defaultView,
      docElem = document.documentElement,
      isBoxModel = (function () {
        var box = document.createElement('div'),
            isBoxModel;
        box.style.paddingLeft = box.style.width = "1px";
        body.appendChild(box);
        isBoxModel = box.offsetWidth == 2;
        body.removeChild(box);
        return isBoxModel;
      })();
  function getTop (element) {
    var box = element.getBoundingClientRect(),
        clientTop  = docElem.clientTop  || body.clientTop  || 0,
        scrollTop  = win.pageYOffset || isBoxModel && docElem.scrollTop || body.scrollTop;
    return box.top + scrollTop - clientTop;
  }
  return function ($scope, $element, $attrs) {
    var offset = $scope.$eval($attrs.rmAffix),
        elemTop = getTop($element[0]),
        $links = $element.find('li'),
        linkTops = [];
    angular.forEach($links, function ($link) {
      var $a = angular.element($link).find('a'),
          href = $a.attr('href').substr(1),
          target = document.getElementById(href),
          elemTop = getTop(target);
      linkTops.push(elemTop);
      $a.on('click', function (event) {
        window.scrollTo(0, elemTop - offset);
        event.preventDefault();
      });
    });
    angular.element($window).on('scroll', function (event) {
      var top = window.pageYOffset,
          index;
      if (top > elemTop - offset) $element.addClass('affix');
      else $element.removeClass('affix');
      //-- remove selected class from all links
      $links.removeClass('active');
      //-- find the closest element
      for (index = 1; index < linkTops.length; index++) {
        if (linkTops[index] - 100 > top) break;
      }
      angular.element($links[index - 1]).addClass('active');
    });
  };
});

HTML（Jade）

https://github.com/robertmesserle/Bobbograph/blob/v3/www/api.jade#L288

ul.nav.nav-stacked.nav-pills(rm-affix=70)
  li.active: a( href="#basic" ) Basic Usage
  li: a( href="#options"   ) Options
  li: a( href="#data"      ) Data
  li: a( href="#padding"   ) Padding

Answer 5

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

解决方案是使用angularized方式。其中一条评论建议使用angular-strap试试，因为它有一个用于完全相同目的的词缀指令。

我遇到了类似的情况并最终使用MacGyver它工作得很好并且使用起来很简单。

Bootstrap data-spy =＆＃34; affix＆＃34;没有处理Angular View更改

5 个答案:

JavaScript：

HTML（Jade）