css - container - Bootstrap data-spy="affix" no funciona en el cambio de Vista Angular

scrollbar bootstrap

Question

Estoy tratando de averiguar por qué mi panel fijo no se queda cuando cambio mi vista Angular.

He agregado la propiedad de afijo directamente al panel en la primera página (detalles), y la he dejado en el espía de datos solo en la segunda página (vuelos).

En una versión web completa, si refresco la página de vuelos, de repente el afijo entra en acción y se queda quieto cuando me desplazo, pero no si simplemente navego a la página utilizando Angular.

Parece que Bootstrap no ha agregado el afijo a la clase cuando navego entre las vistas.

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;  
}

Aquí hay un Plunker ..

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

He encontrado una pregunta similar aquí:

Twitter Bootstrap: el afijo no se activa en la aplicación de una sola página

Pero no pude averiguar cómo aplicar eso a mi problema aquí ...

Cualquier ayuda sería genial!

Answer 1

Esta es una pregunta antigua, pero recientemente me topé con ella cuando reescribí mi sitio web como una aplicación AngularJS. También estaba usando el complemento Bootstrap Affix (incluida la actualización de la clase activa en scroll), y no pude encontrar un complemento que funcionara como lo que estaba buscando, así que escribí mi propia directiva.

Véalo en acción: http://bobbograph.com/#/api

Nota: El valor proporcionado a la directiva es el desplazamiento superior.

El 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'');
    });
  };
});

El 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 2

No funciona porque los eventos específicos no se activan en el cual el afijo está vinculado. En una aplicación de una sola página, como en su caso, la página se carga solo una vez, por lo que cualquier lógica vinculada a la página cargada y eventos similares fallan. Las cosas funcionarán bien si recargas la página.

La solución es utilizar el modo angularizado. Uno de los comentarios sugiere el uso de una tira angular, ya que tiene una directiva de afijos para el mismo propósito.

Me encontré con una situación similar y terminé usando MacGyver Funciona realmente bien y es fácil de usar.

Answer 3

Prefiero engancharme a los data-spy="scroll" originales data-spy="scroll" bootstrap, para una mejor migración de un clickdummy a producción, y aplicarle la funcionalidad de bootstrap original, porque Angular-UI es (al menos para mí) un desastre inaceptable.

(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

Si no desea utilizar UI Bootstrap o UI Utils en lugar del antiguo y simple afijo Bootstrap 3, este envoltorio de directiva de afijo funciona bien para mí en mi aplicación angular de una sola página. Estoy usando el enrutador AngularUI.

Aplicar el afijo la primera vez que se carga la directiva. Luego, $stateChagneSuccess en $stateChagneSuccess con esto: $element.removeData(''bs.affix'').removeClass(''affix affix-top affix-bottom''); como se ve aquí: restablecer / cambiar el desplazamiento del afijo bootstrap , y luego volver a aplicarlo. Déjame saber si algo de lo que estoy haciendo aquí es terriblemente feo, aunque me gusta la simplicidad y me gusta aprovechar la versión predeterminada de 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 5

Angular UI Utils ( no Angular UI Bootstrap, como se menciona en los comentarios) tiene una directiva Scrollfix que se puede usar en lugar de Affix. Tuve el mismo problema que usted con Affix que no funciona después de cambiar las vistas. Intenté agregar Angular UI Scrollfix a mi aplicación y hasta ahora parece que satisfará mis necesidades.

Aquí hay una publicación útil de Desbordamiento de pila que encontré con más explicaciones y ejemplos: Angular ui-utils scrollfix .