Как иметь угловую директиву для двух элементов?

Question

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

У меня есть код jquery, который включает клонирование элемента, и я использовал этот код в прошлом и пытался преобразовать его в Angular несколькими способами. Я попытался просто оставить его как один элемент и изменить ng-класс, но это не имеет такого же визуального эффекта и выглядит плохо, поэтому я решил, что мне нужно два элемента (оригинал и липкий).

Я попытался клонировать его в функции директивной ссылки, но ng-repeat внутри него не запускается, поэтому меню не заполнено ссылками.

Поэтому я попытался поместить два элемента <> в DOM, и он отображает только последний. Каков наилучший способ, чтобы 2 элемента прошли одну и ту же директиву? Я так потерялся.

Директива ссылка:

link: function(scope, element){ 
     var scrollTimer; 
     var origHeight = element.offset().top; 

     element.clone().insertAfter(element).toggleClass('secondary original'); 

     angular.forEach(scope.days, function(value, key) { 
      var date_data = {action: 'get_date', day: value.name}; 
      $http({ 
       method: 'POST', 
       url: ajaxUrl, 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
       data: date_data 
      }) 
      .then(function(response){ 
       scope.days[key].date = response.data.date; 
      }); 
     }); 
    } 

шаблон Директива:

<div id="day_header" class="original"> 
    <div ng-repeat="day in days" ng-class="{'active': active_day == day.name}" class="day" ng-click="changeActiveDay(day.name)" data-date="{{day.date}}">{{day.name}}</div> 
</div> 

Answer 1

Я бы порекомендовал против использования клона. Установите все элементы на position: relative;. и когда перемещение прокрутки проходит точку, измените их на position: absolute;.