Блог

Я думаю, что мне может не хватать чего-то простого.

У меня есть элемент контейнера и ng-повтор для дочернего элемента, например:

 <div id="container">
    <div class="activity" ng-click="myFunc($element)">
    </div>
</div>
  

Что я хочу, так это прокрутить контейнер до щелкаемой активности (контейнер прокручивается и имеет заданную высоту).

Я попытался использовать $element, чтобы просто получить смещение активности из верхней части контейнера, а затем просто использовать анимированную функцию jQuery для прокрутки до смещения следующим образом:

 $("#container").animate({ scrollTop: theOffset, { duration: 'medium',easing:'swing' });
  

Но, похоже, я не могу использовать .offset для $elemnt…

Чего мне здесь не хватает?

Заранее спасибо, Габи.

Хотя обычно я бы не советовал манипулировать DOM отдельно от AngularJS, возможный способ заставить это работать заключается в следующем:

Я перешел $element на $event , чтобы получить целевой элемент из события щелчка:

 <div id="container">
    <div class="activity" ng-click="myFunc($event)">
    </div>
</div>
  

Что касается части javascript, получение смещения выбранного элемента приведет нас к нужному местоположению.

 $scope.myFunc = function(theOffset){
    $("html, body").animate({ scrollTop: $(theOffset.target).offset().top, duration: 'medium',easing:'swing' });
};
  

Мне пришлось изменить селектор jquery, чтобы он был включен html, body , чтобы он анимировался на самой странице, а не просто в контейнере. Опять же, в идеале с AngularJS вам следует избегать выполнения подобных манипуляций с jquery DOM напрямую.