2つの要素にangleディレクティブを与える方法は？

Question

私は、ディレクティブである私のページに小さなメニューを持っています。しかし、ユーザーがスクロールすると、ナビゲーションがスティッキーになるようにしてから、ビューポートから抜け出してください。

私は、要素のクローンを含むjqueryコードを持っています。私は過去にこのコードを使用し、Angularに複数の方法で変換しようとしました。私はちょうど1つの要素としてそれを残して、ngクラスを変更しようとしましたが、これは同じ視覚的効果がなく、悪く見えるので、私は2つの要素（オリジナルと粘着性）が必要であると判断しました。

ディレクティブリンク機能でクローンを作成しようとしましたが、その内部のng-repeatが実行されないため、メニューにはリンクが設定されていません。

DOM内に2つの<要素を入れてみましたが、最後のものだけをレンダリングします。 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;に変更されます。