Угловая привязка не работает вместе с ngSticky

Question

пытается использовать вместе Angular-Snap с ngSticky, но он не работает, панель, которая должна оставаться sticky прокручивается.

Я подготовил два примера:

• Пример с угловыми-SNAP, который не работает: https://plnkr.co/edit/ARhUti3jJCEjB8sLL5q0?p=preview
• Пример без углового-SNAP, который работает: https://plnkr.co/edit/QJSQelcdUP2AamFBuNiH?p=preview

Вы можете развернуть в обоих примерах панель аккордеона и попробуйте прокрутить, чтобы увидеть разницу. На самом деле я пытался несколько решений, чтобы сделать элемент быть липким, но никто не работал с угловым-SNAP

Если удалить в , нерабочим примераangular-snap.css файла он начинает работать, но очевидно, мне это нужно. Я не мог отладить эту проблему дальше, поэтому любая помощь будет оценена по достоинству.

Answer 1

На самом деле я нашел обходное решение :) Я улыбаюсь, потому что это не первый раз, когда я нахожу решение самостоятельно вскоре после того, как задаю вопрос.

Я создал следующую директиву:

.directive("stickyElement", function ($window) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() { 
      console.log("scrolled"); 
     }); 

     $(".snap-content").bind("scroll", function(event){ 
      var scrolledUp = $(".snap-content").scrollTop(); 
      console.log("from top: " + scrolledUp); 
      var offset = 50 - scrolledUp > 0 ? 50 - scrolledUp : 0; 
      $(element[0]).offset({top: offset}); 

     }) 
    }; 
}); 

Прежде всего он обнаруживает свиток .snap-content элемента и не window, который остается unscrolled, если я правильно понял, это причина, почему он не работает , Угловая привязка вызывает отклонение от window. И затем я делаю простой расчет, чтобы узнать, какой из offset сверху должен получить этот элемент, а затем установить это значение. Конечно, в окончательной версии все параметры будут переданы в Угловой способ.

Это рабочий пример: https://plnkr.co/edit/HnBM2P5H7D2LPYt7uXve?p=preview

P.S. Несмотря на то, что он работает, я чувствую, что это немного hackish решение по той причине, что моя директива связывается с не связанным элементом, .snap-content. Поэтому, если кто-то даст более красивое решение, я его приму.

Answer 2

Автор Angular-SNAP при условии решения этого вопроса здесь: https://github.com/jtrussell/angular-snap.js/issues/113 Вы должны использовать:

• угловой оснастке only.css - от этого репо
• snap.css - от Привязать .js репо

Опять же, пожалуйста, см подробное описание здесь: https://github.com/jtrussell/angular-snap.js/issues/113