Bootstrap data-spy =「affix」不能在角度視圖中更改

Question

我想知道爲什麼我的affix -ed面板在更改我的角度視圖時並未放置。

我已經將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

我發現了一個similair疑問句這裏和灰：

Twitter Bootstrap: Affix not triggering in single page application

但我無法弄清楚如何應用在這裏我的問題......

任何幫助將是巨大的！

Answer 1

它不起作用，因爲特定的事件不是在哪個詞綴綁定的情況下觸發的。在單頁應用程序中，與您的情況一樣，該頁面僅加載一次，因此任何綁定到加載頁面的頁面和類似事件的邏輯都會失敗。如果您重新加載頁面，事情會正常工作。

解決方案是使用angularized方式。其中一條評論建議使用角度測試，因爲它具有完全相同目的的詞綴指令。

我遇到過類似的情況，最後使用MacGyver它工作得很好，使用簡單。

Answer 2

Angular UI Utils（不是 Angular UI Bootstrap，如註釋中所述）具有可用於替代Affix的Scrollfix指令。我遇到了同樣的問題，因爲在更改視圖後，您與Affix無法正常工作。我嘗試添加Angular UI Scrollfix到我的應用程序，到目前爲止，它看起來會滿足我的需求。

這裏是一個有用的堆棧溢出後，我發現更多的解釋和例子：Angular ui-utils scrollfix。

Answer 3

這是一個古老的問題，但我最近偶然發現，當我的網站改寫爲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 

Answer 4

如果你不想使用的用戶界面引導或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 5

我寧願勾上原有data-spy="scroll"引導綁定 - 從clickdummy更好地遷移到生產 - 並採用原有的自舉功能，因爲角度的用戶界面是（至少對我來說）不可接受的爛攤子。

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