16

affixAngular ビューを変更したときに -ed パネルが動かない理由を理解しようとしています。

最初のページ (詳細) のパネルに接辞プロパティを直接追加し、2 番目のページ (フライト) でのみデータスパイに残しました。

本格的な Web バージョンでは、フライト ページを更新すると、突然接辞が表示され、スクロールしてもそのままになりますが、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;  
}

これがプランカーです..

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

ここで同様の質問を見つけました：

Twitter Bootstrap: 単一ページ アプリケーションで Affix がトリガーされない

しかし、ここで私の問題にそれを適用する方法がわかりませんでした...

どんな助けでも素晴らしいでしょう！

4

5 に答える 5

13

Angular UI Utils (コメントで述べたように、Angular UI Bootstrap ではありません) には、Affix の代わりに使用できる Scrollfix ディレクティブがあります。ビューを変更した後、Affixが機能しないという同じ問題がありました。Angular UI Scrollfix をアプリに追加しようとしましたが、これまでのところ、私のニーズを満たすようです。

これは、より多くの説明と例を見つけた役立つスタック オーバーフローの投稿です: Angular ui-utils scrollfix。

于 2014-08-07T21:59:02.990 に答える
8

UI Bootstrap または UI Utils をプレーンな古い Bootstrap 3 接辞の代わりに使用したくない場合、この接辞ディレクティブ ラッパーは、単一ページの角度付きアプリでうまく機能します。AngularUI ルーターを使用しています。

ディレクティブが最初に読み込まれるときに接辞を適用します。$stateChagneSuccess次に、これでそれをクリアし$element.removeData('bs.affix').removeClass('affix affix-top affix-bottom');ます: ここに見られるように: 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();

        }
    };
}]);
于 2015-01-21T22:31:24.417 に答える
3

これは古い質問ですが、最近、Web サイトを 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 (ジェイド)

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
于 2014-10-14T16:35:56.663 に答える