1

I'm working on a project where I'm using a combination of ng-repeat and ng-filter to navigate through a series of content. After a user clicks a navigation link, the page filter updates so that more content is added, and the viewport should scroll to the next anchor. Here's an example:

Nav

<li class="nav"><a href="#first-section" id="first-link">First Section</a></li>
<li class="nav"><a href="#second-section" id="second-link">Second Section</a></li>
<li class="nav"><a href="#third-section" id="third-link">Third Section</a></li>

Controller

$('li.nav').click(function (event) {
    var navId = event.target.id; //Get ID of clicked link
    switch (navId) {
        case 'first-link':
            $scope.Filter = { type: 'first-section' }; //Set ng-filter "Filter" to only show content from first section.
            $('html, body').animate({
                scrollTop: $("#first-section").offset().top //Scroll to first section.
            }, 2000);
            break;
        case 'second-link': //Second verse, same as the first.
            $scope.Filter = { type: 'second-section' }; //The 2nd section also includes section 1, so that a user can scroll back up.
            $('html, body').animate({
                scrollTop: $("#Evolution").offset().top
            }, 2000);
            break;
    };
});

Note that the second filter also includes the content for the first (I want the user to be able to scroll back up the page. For elements that are not already present on the page, the wind jumps down to the ng-repeat element immediately (no scroll). If the element is already present on the page (e.g. if the user is on the 3rd section and clicks to go back to the first) the scrolling works fine.

The question: Is a way for me to update scrollTop so that it re-calculates the positions of elements on the page after ng-filter fires?

Why ng-repeat? The site is content heavy and I was looking for something that would load in an AJAX-y way, but also allow users to search through the content (with a second filter not shown here).

alex
  • 6,818
  • 9
  • 52
  • 103
Charlie Weems
  • 1,682
  • 1
  • 16
  • 28
  • Unrelated, but have you read: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background ? – TheHippo Sep 16 '13 at 18:49
  • Have you tried to do it the angular way. Not using `$('something').click` but instead use `ng-click` directive, or even better routing. – TheHippo Sep 16 '13 at 18:50
  • @TheHippo – I was using ng-click="Filter = {type: 'first-section'}" but then decided to move things into the controller because I thought it would just be cleaner. I really should just set up routing, but I'm not sure how to do that to a filter state as opposed to a view. Thanks for the link! – Charlie Weems Sep 16 '13 at 18:56
  • Go though the tutorial from their website. I know the learning curve is pretty steep, but once you got the concepts of angular could can solve 99% of the problems without jQuery looking 1000-times cleaner than what you posted above. (No offence ;-) – TheHippo Sep 16 '13 at 19:01
  • It's a great tutorial! I learn new things every time – this is partly inspired by the angular-phonecat. – Charlie Weems Sep 16 '13 at 19:10

0 Answers0