AngularJS triggers the function on all controllers

I encountered a problem with a specific function in my code. The issue is that the scrollFunction continues to get triggered even when I navigate to another page. I would like to limit this functionality to only apply to a particular page within the controller. 

  
$window.onscroll = function() { scrollFunction() };

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("btt").style.display = "block";
    } else {
        document.getElementById("btt").style.display = "none";
    }
}

javascriptangularjsscrolltopdocument-body

Answer №1

To prevent memory leaks, it is important to remove the scroll event listener when the controller is destroyed.

angular.element($window).on('scroll', scrollFunction);

scope.$on('$destroy', function () {

  angular.element($window).off('scroll', scrollFunction);
});

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

Clear cache folders in the cordova and ionic file systems to free up space

In a mobile app, I need to delete the cached images that are downloaded by a specific user after they log out. For example, if user1 logs in and downloads some images, and then user2 logs in and downloads other images, user2 should not see the images dow ...

angularjscordovaionic-frameworkngcordova

I am looking to transfer information in CodeIgniter from a view utilizing AJAX post, handle that information in the controller, and then return the resultant array back to the view

I have been searching the entire internet, but unfortunately, I couldn't find a helpful solution. Any assistance would be greatly appreciated. Thank you in advance. MY HTML <div class="row"> I am unsure whether the form tag is required in my ...

javascriptphpajaxcodeigniter

method for sorting labels in Select element in ReactJS

Hey there, I'm facing an issue with the code snippet available here. I would really appreciate it if you could assist me in resolving this problem. This is the code: import React from "react"; import { Select } from "antd" ...

javascriptreactjsantd

Encountering a Basic React Issue: Unable to Implement @material-ui/picker in Next.js

I'm currently attempting to integrate the @material-ui/pickers library into my Next.js application. In order to incorporate the Picker provider, I followed the guidance provided in the Next.js documentation by adding the _app.js file inside /pages: i ...

javascriptreactjsmaterial-uinext.js

Guide on implementing a Pug for loop using AJAX

For my school project, I am developing a web application similar to Tinder using Node.js, Express, and Pug. The main goal of the project is to provide potential matches to users based on either their proximity or common interests with the current user. Whe ...

javascriptjqueryajaxnode.jspug

Difficulty in extracting data from child elements of JSON documents

Below is the JSON String: "book_types": { "type": "1", "books": [ { "name": "default", "cover": null, "lastUpdated": { "microsecond": 114250, "ctime": "Fri Aug 9 01:27:45 ...

javascriptjqueryjson

What is preventing the mat-slide-toggle from being moved inside the form tags?

I've got a functioning slide toggle that works perfectly, except when I try to move it next to the form, it stops working. When placed within the form tag, the toggle fails to change on click and remains in a false state. I've checked out other ...

javascripthtmlangularforms

directive still running despite attempting to stop the service

In my modal window, there is a directive that utilizes a service to make HTTP requests at regular intervals using $interval. However, even after closing the modal window, the service continues to run and make requests every 30 seconds. Is there a way to ...

javascriptangularjsangular-ui-bootstrap

Having trouble with updating a Firebase database object using snap.val()

I'm trying to figure out how to update a property within the snap.val() in order to make changes to my Firebase database. function updateListItem(listItem) { var dbRef = firebase.database() .ref() .child('userdb') .child($sco ...

javascripttypescriptfirebasefirebase-realtime-database

What is the process of implementing FFT in node.js?

Struggling with implementing FFT in node.js is proving to be quite challenging for me at the moment. Despite experimenting with three different libraries, I find them all poorly documented, which only adds to the complexity of the task. My current setup i ...

javascriptnode.jsfft

What is the most effective way to retrieve distinct values in Mongoose?

I am looking to extract unique values from a collection. Here is an example: const userID = `user1`; const users = await Chat .find({'$or': [{to: userID}, {from: userID}]}) .select(`-_id to from`) .lean(); // users will contain: [ {from: ...

javascriptnode.jsmongodbmongoose

What is causing the issue of the page overflowing in both the x and y axis while also failing to center vertically?

I've been trying to align the <H4> styled component to the center of the page using flex-box, but it's not working as expected. I also attempted using margin:0 auto, but that only aligned the H4 horizontally. Additionally, I'm investi ...

javascriptreactjsmaterial-uistyled-components

Resolving Route Problems in Node.js with Express

Currently, I am in the process of developing a website using Express and NodeJS. One issue that I have encountered is related to routing. In my app.js file, I have defined a route that expects a parameter like so: app.get(['/purchase/:purchaseID&apos ...

javascriptnode.jsexpressroutes

Tips for pinpointing a particular item within a JSON document

I am struggling with how to manipulate my JSON file using JavaScript. Each object in the array is associated with an ID, and I want to be able to target specific objects based on their position in the array. For example, how can I append object[1] from arr ...

javascriptjqueryarraysajaxjson

Node.js encountered an error: TypeError - req.end does not have a function

Encountering an error stating that req.end is not a function, even though it works elsewhere in the code. Upon researching, some sources suggest that the global req variable might have been misplaced or lost. However, I haven't used any other variabl ...

javascriptnode.jsexpresspost

Troubleshooting Email Communication Errors: A Persistent Challenge

I am new to nodemailer and trying to work on a simple application. However, I keep encountering errors within the nodemailer module when running my app. Here is my app.js code: const nodemailer = require('nodemailer'); const transporter = node ...

javascriptnode.jsnpmsyntax-errornodemailer

When the mouse hovers over the slider, the final image jumps into view

After successfully building an image slider that displays 2 partial images and 1 full image on hover, I encountered a bug when setting the last image to its full width by default. This caused a temporary gap in the slider as the other images were hovered o ...

javascriptjqueryhtmlcss

Experiencing Limitations with Node.JS node-hbase Scan Functionality, Unable to Retrieve More than 1000

I am facing an issue while trying to retrieve records from an HBase table in Node.JS using the node-hbase module, which connects to the rest server. I am able to fetch the first batch of records successfully, but I am struggling to get the next set of re ...

javascriptnode.jsrestnpmhbase

The count of bits is not producing the anticipated result

Attempting to tackle the challenge of Counting Bits using JavaScript, which involves determining the number of set bits for all numbers from 0 to N, storing them in an array, and returning the result Let me provide an explanation Input: n = 5 ...

javascriptnode.jstypescriptdata-structuresecmascript-6

Tick the checkbox to indicate that I want to insert an image in the adjacent column for the same row

Every time I click on the checkbox, an image should appear in the adjacent column for that specific row. Despite using the addClass() method and targeting the td, the image is appearing in all rows instead of just the selected one. Could somebody help me ...

javascriptjqueryhtmlcssangularjs