web-dev-qa-db-ja.com

Bootstrap data-spy = "affix"が機能していませんAngularビューの変更

Angularビューを変更したときに、affix-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ブートストラップ：単一ページアプリケーションで接辞がトリガーされない

しかし、私はここでそれを私の問題に適用する方法を理解できませんでした...

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

cssangularjstwitter-bootstrapaffixng-view
16
PGallagher

Angular UI Utils （notAngular UI Bootstrap、コメントに記載されているように） Affixの代わりに使用できるScrollfixディレクティブ。ビューを変更した後にAffixが機能しないという同じ問題が発生しました。Angular UI Scrollfixをアプリに追加してみましたが、これまでのところ、それが私のニーズを満たすように。

これは私が見つけた便利なStackOverflowの投稿で、より多くの説明と例があります： Angular ui-utils scrollfix 。

13
jsparks

UI BootstrapまたはUIUtilsを使用して、プレーンな古いBootstrap 3接辞を使用したくない場合は、この接辞ディレクティブラッパーが適切に機能します。私の単一のページでangularapp。AngularUIルーターを使用しています。

ディレクティブが最初にロードされるときに接辞を適用します。次に、_$stateChagneSuccess_で次のようにクリアします：$element.removeData('bs.affix').removeClass('affix affix-top affix-bottom');ここに示すように： bootstrap affix のオフセットをリセット/変更してからシンプルさが好きで、デフォルトの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();

        }
    };
}]);
_
8
Gadget Blaster

元のdata-spy="scroll" bootstrapバインディング（クリックダミーから本番環境への移行を改善するため））をフックして、元のbootstrap機能を適用することを好みます、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
            }
          });
        }
      });
    }
  }
})();
4
kernel

これは古い質問ですが、最近、自分の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
3
Robert Messerle

接辞がバインドされている特定のイベントが発生しないため、機能しません。あなたの場合のようなシングルページアプリケーションでは、ページは一度だけロードされるので、ロードされたページにバインドされているロジックや同様のイベントは失敗します。ページをリロードすると、問題なく動作します。

解決策は、角度を付けた方法を使用することです。コメントの1つは、まったく同じ目的で接辞ディレクティブがあるため、angular-strapを使用することを提案しています。

私は同様の状況に遭遇し、最終的に MacGyver を使用することになりました。これは非常にうまく機能し、簡単に使用できます。

2
Faisal Feroz