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

Issues with routing in NodeJS Express causing routes to not be called

I've been working on setting up a basic REST API using nodeJS. However, I am facing an issue where none of the endpoints are being called when I try to access them. Can someone guide me on what changes I need to make in order to get it working properl ...

javascriptnode.jsrestexpress

jQuery removes HTML tags from XML documents

I currently have a setup where a page is functioning as an AJAX loader with the help of jQuery. It is designed to retrieve XML documents, like the one shown below, and then place the values of title, authPhrase, and content into the appropriate div element ...

javascriptxmljquery

What is the best way to identify when a particular character has been entered into the input field?

HTML <div class="form-group"><label class="col-md-4 control-label" for="s1">URL</label> <div class="col-md-4"><input id="url" name="url" type="text" ng-change="checkVal()" ng-model="url" placeholder="" class="for ...

javascriptangularjs

Exploring the intricacies of multidimensional array scopes in AngularJS

I have a JSON value that includes a list of countries and states. I want to split this value into two different scopes: $scope.countries and $scope.states. When the country is changed, the state should change based on the selected country. Sample JSON da ...

javascriptphpjsonangularjs

Adjust the value of a variable within a module using Angular JS

Within my module, I have the code below: var mod; mod = angular.module('ajax-interceptor', []); mod.config(function($httpProvider) { $httpProvider.interceptors.push(["$q", function($q, dependency1, dependency2) { return { ...

javascriptangularjsangularjs-scope

Arranging JSON data by a specific attribute using JavaScript

As someone who is new to JavaScript, I have been working on some basic exercises. In my current code, I have a JSON data stored in a String that contains information about employees. My goal is to sort this data based on the age attribute and display the o ...

javascriptarraysjsonfunctionsorting

Verify whether the session has been initiated and establish a global variable that can be utilized by JavaScript

I currently have the following arrangement: main.php page.php Whenever a user visits any of these pages, they experience an "introductory header animation". However, I want to ensure that this animation is only displayed on their initial visit and not w ...

phpjavascriptsessionsessionid

Tips for clearing a material-ui search input field with the help of a button

Currently, I am working on a tutorial that involves implementing react material-ui tables along with a search input textfield. I am attempting to enhance this by adding a button that not only resets the table report but also clears the search input textfie ...

javascriptreactjsmaterial-uiuse-state

The Best Approach for Angular Google Maps Integration

I'm diving into Angular for the first time while working on a project that requires advanced mapping functionality like clustering, routing, road routing, paths, directions, polygons, events, drawing on maps, info windows, markers, etc. After some re ...

javascriptgoogle-mapsangularjsgoogle-maps-api-3

A guide on updating the Date Textfield value in Material UI

In my data structure, I have an array of objects with unique ids and date values. For instance, the array named stepDates might appear like this: [ { id: 1, date: "2021-07-23" }, { id: 2, date: null }, { id: 3, d ...

javascriptreactjsreact-nativereact-hooksmaterial-ui

The callback function inside the .then block of a Promise.all never gets

I'm currently attempting to utilize Promise.all and map in place of the forEach loop to make the task asynchronous. All promises within the Promise.all array are executed and resolved. Here is the code snippet: loadDistances() { //return new Prom ...

javascripttypescriptpromise

Having issues with ng-dblclick in Angular 1 when using Electron platform

Currently, I am working on a project that involves using electron with angular 1.6.4. Within my controller, I am dynamically generating li items and trying to bind a double click event to them. However, despite several attempts, I have not been successful ...

angularjselectronangularjs-ng-click

How can you switch between CSS styles using JQuery?

Is there a way to change CSS properties every time I click using jQuery? I couldn't find any information on this specific topic. Can someone guide me on how to achieve this with jQuery? I want the background color to change each time it is clicked. W ...

javascripthtmljquerycss

In Visual Studio, the .js.map files and .js files seem to be mysteriously hidden, leaving only the TypeScript .ts files visible

In the past, I utilized Visual Studio Code for Angular 2 development and had the ability to hide .js and .js.map files from the IDE. Now, I am working on a project using VS 2017 Professional with Typescript, Jasmine, Karma, and Angular 4. Task Runner, etc. ...

javascriptangularvisual-studiotypescriptvisual-studio-2017

What is the process for incorporating Material-UI into a JSFiddle project?

I'm having trouble figuring out how to load and use the Material UI script on platforms like JSFiddle or SO's code editor, even though I can add it with NPM. Check out this JSFiddle example <script src="https://unpkg.com/@material-ui/core/um ...

javascriptreactjsmaterial-ui

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

Using async method in controller with NestJS Interceptor

I am seeking a way to capture both the result and any potential errors from an asynchronous method within a controller using an interceptor. When an error is thrown, the interceptor can respond accordingly. However, I am struggling to figure out how to tri ...

javascripttypescriptasynchronousnestjsinterceptor

AngularJS encountered an unidentified provider: $routeProviderProvider

I've hit a roadblock with an unfamiliar provider error and can't seem to figure out what I'm missing. Here's the setup: in main.js 'use strict'; angular.module('myApp') .controller('MainCtrl', ['n ...

javascriptangularjs

Make the jQuery toggle() function work like a regular radio button when selecting multiple options at a time

I have recently created two radio buttons using <i> font icons. Previously, I had successfully used the same code to create a checkbox, so I applied it to the radio buttons as well. After fixing the positioning, everything seemed fine when interactin ...

javascripthtmljquerycssbootstrap-4

What methods are available to modify the colors in an Apex bar chart?

Currently, I am in the process of constructing a bar chart using react, mui, and apex-chart. One specific requirement I have is to modify the colors of the bars displayed on the chart. Despite my efforts in attempting various solutions, I have been unsucce ...

javascriptreactjschartsmaterial-uiapexcharts