After sending a GET request in AngularJS, simply scroll down to the bottom of the

Usually, I use something like this:

$scope.scrollDown = function(){
    $location.hash('bottom');
    $anchorScroll();
}

While this method works fine in most cases, I've encountered an issue when fetching data for an ng-repeat and trying to resize the view once the data is loaded.

For example (in the controller):

users.fetch({userList:$routeParams.conversationId}, function(data){
        $scope.userList = data;
        $scope.scrollDown();
})

The scrollDown function executes too quickly, before the ng-repeat has finished populating the $scope.userList that it relies on to build its table.

I'm looking for a way to trigger scrollDown after the list has been updated or modified. Any suggestions on how to achieve this would be greatly appreciated!

Many thanks!

Answer №1

To trigger the goToBottom function when a variable in AngularJS changes, you can utilize a $watch listener.

$scope.myList = [];

$scope.$watch("myList", function () {
    $scope.$evalAsync(function () {
        $scope.performAction();
    });
}, true);

$scope.performAction = function () {
    $(function () {
        //$scope.goToBottom();
    });
};

Answer №2

You have the option to implement a scrolling function at the bottom of the page once it has fully loaded.

angular.element($window).bind('load', 
    function() {
      var lastMessage = document.getElementById("messages-list").lastElementChild;
      lastMessage.id = "bottom";
      
      $location.hash('bottom');
      $anchorScroll();      
    }
  

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I encountered a RangeError with code [ERR_HTTP_INVALID_STATUS_CODE] due to an invalid status code being undefined

I have encountered a specific error while running my note-taking app. The error seems to be related to the following piece of code - app.use((err,req,res,next)=>{ res.status(err.status).json({ error : { message : err.message ...

Place the div directly beside the input field on the right side

I am attempting to align a div directly beside the text being entered in a text input field. It seems logical to me that this could be achieved by measuring the length of the input value and positioning the div accordingly. However, the issue I am facing i ...

Maximizing Jest's potential with multiple presets in a single configuration file/setup

Currently, the project I am working on has Jest configured and testing is functioning correctly. Here is a glimpse of the existing jest.config.js file; const ignores = [...]; const coverageIgnores = [...]; module.exports = { roots: ['<rootDir&g ...

The custom confirmation popup is experiencing technical issues

Currently, I am utilizing a plugin to modify the appearance of the confirm popup. Although I have successfully customized the confirm popup, I am encountering an issue where upon clicking the delete icon, the custom confirm popup appears momentarily before ...

Acquiring Device Data in React-Native for iOS

Hello, I am currently attempting to retrieve device information from an iPad. I attempted to use the library found at https://github.com/rebeccahughes/react-native-device-info, however, it caused issues after performing a pod install. My main goal is to ob ...

Transforming this Rails form into an Ajax/JavaScript/jQuery format will eliminate the need for submission

I have developed a form in Rails that computes the Gross Profit Margin Percentage based on an input of Price. When a user selects the relevant product on the form and enters a price in the 'deal_price' field. A callback is triggered to retrieve ...

Modify the universal variable through a jQuery action

As a newcomer to jQuery with limited experience in JavaScript, I find myself facing a dilemma. I am working on a jQuery range slider that displays two year values, and I have successfully stored both the minimum and maximum years in a variable. However, I ...

Scraping data from a webpage using Node.js and the Document Object Model

I am attempting to extract information from a specific website using Node.js. Despite my best efforts, I have not made much progress in achieving this task. My goal is to retrieve a magnet URI link which is located within the following HTML structure: < ...

Issues with JavaScript Content Loading in epub.js on a Website

Hey there, I'm currently experimenting with the epub.js library and trying to set up the basics. However, I'm encountering an issue where the ebook is not showing up in my browser: <!DOCTYPE html> <html lang="en"> <head&g ...

Exploring the depths of Mongoose queries with recursive parent references

I'm attempting to replicate the functionality of this MongoDB example using Mongoose, but it seems more complicated in Mongoose. Am I trying to force a square peg into a round hole? This source is taken from http://www.codeproject.com/Articles/521713 ...

Is there a way to programmatically close all ui-select drop down lists?

I am currently working on a directive to enable dragging functionality for angular UI $uibModal. Additionally, I want all opened dropdown lists of ui-select within the modal body to be closed when the modal is being dragged. Is there anyone familiar with ...

Is there a way to ensure the content of two divs remains aligned despite changing data within them?

Currently, I have two separate Divs - one displaying temperature data and the other showing humidity levels. <div class="weatherwrap"> <div class="tempwrap" title="Current Temperature"> ...

AngularJS allows users to seamlessly retain any entered form data when redirected, enabling users to pick up right where they left off when returning to the form

I am currently working on a user data collection project that involves filling out multiple forms. Each form has its own dedicated HTML page for personal details, educational details, and more. After entering personal details and clicking next, the data ...

Issues with rendering HTML5 drag and drop styles are not visible on a Windows Server 2003 platform

I am currently developing a file upload tool utilizing Valum's Ajax-Uploader as the foundation. The concept is reminiscent of how attaching files works in Gmail. Users should be able to simply drag and drop a file from their desktop into the browser w ...

Showing how to make an element visible in Selenium and Python for file uploading

Check out this HTML snippet: <div class="ia-ControlledFilePicker"><input class="ia-ControlledFilePicker-control icl-u-visuallyHidden" type="file" id="ia-FilePicker"><label class="ia-ControlledFilePicker-fakeControl" for="ia-FilePicker">C ...

Converting milliseconds to a valid date object using Angular form validation

I am facing an issue with form validation and milliseconds in my Angular application. It seems that Angular does not consider time in milliseconds as a valid date format, causing the angular.isDate(1418645071000) function to return false. How can I modify ...

Issues with data retrieval from PHP file in AJAX submission

During my attempts to utilize AJAX for submitting data to a PHP file, I encountered an issue where the submission was successful and I could receive a message echoed back from the PHP file. However, when trying to echo back the submitted data or confirm if ...

After a successful transactWrite operation using DynamoDB.DocumentClient, the ItemCollectionMetrics remains unpopulated

Currently, I am utilizing a transactWrite instruction to interact with DynamoDb and I am expecting to receive the ItemCollectionMetrics. Even though changes have been made on the DynamoDb tables, the returned object is empty with {}. Does anyone have any ...

Animation not fluid with ReactCSSTransitionGroup

Currently, I am in the process of developing an image carousel that showcases images moving smoothly from right to left. However, despite its functionality, there seems to be a slight jaggedness in the animation that I can't seem to resolve. Interesti ...

Steps to ensure that a particular tab is opened when the button is clicked from a different page

When I have 3 tabs on the register.html page, and try to click a button from index.html, I want the respective tab to be displayed. Register.html <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist"> <l ...