Remove the watchers in ng-bind when the item is no longer visible

I am currently utilizing AngularJS with the ng-repeat directive. Each item within the repeat structure is quite large, containing numerous instances of ng-bind, and the entire list is enclosed within a scrollbar. I am looking to develop a script that can deactivate the watches associated with each ng-bind when the item is not visible (outside the scrollable area) and reactivate them once the item becomes visible again.
I have two inquiries:
1. Has anyone already created such a script?
2. Since ng-bind sets up a watch, how can I access the watch deactivation process ($scope.$watch only provides the deactivation method, which occurs within the ng-bind directive)?

Thank you!

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat

Answer №1

Currently implementing the angular-viewport-watch library in my project, specifically with nested tables containing numerous rows within a scrollable container.

Encountered and resolved some issues (refer to this and this), but overall functionality is satisfactory. The library effectively removes watches for elements out of viewport, adding them back when re-entered.

Utilizing the annotate-watchers snippet on chrome to easily track the number of watchers associated with each DOM element.

Answer №2

If you're looking to access the ng-bind of an element, you can easily create a directive that passes in the scope. By having access to the scope, you can then utilize the $$watchers. I've put together a demonstration on a fiddle which you can view here.

link: function(scope, elt, attrs) {
    console.log(scope.$$watchers);
}

In regards to your scrolling issue, there are a few options available. While I haven't personally used it, there seems to be a plugin that may solve your problem. The concept behind an inview directive is attaching a scroll listener to your container, calculating which elements are currently in view.

Once identified, you can trigger an inview function for those visible and an outview function (which could remove watchers) for those no longer in view.

If you have any questions, feel free to ask. Hopefully this information proves helpful to you!

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

What is the best way to locate an item reference for a specific DOM element?

Imagine a vast DOM structure with approximately 10,000 HTML elements, including 1,000 span tags. None of the span elements have any identifiers and are buried deep within other objects with long, complex Xpath paths that are not user-friendly for selectio ...

javascripthtmlcssdomreference

My Discord bot seems to be malfunctioning and failing to send out

I am new to discord.js and I'm having trouble getting my bot to respond with a message when I send one on the server. The bot shows as online in Discord and "Logged in!" appears in the console when I run it, so client.on("ready") seems to be working f ...

javascriptnode.jsjavahelp

Steps for generating a pop-up window for choosing a file from a local folder?

I'm looking to develop a popup window that displays all the files within a specific directory, for example, a /functions directory. The goal is to be able to select a file in that directory, click "ok", and store its information in variables without a ...

javascriptphpjqueryhtmlfile

What is the best way to continuously loop the animation in my SVG scene?

After designing a SVG landscape with an animation triggered by clicking the sun, I encountered an issue where the animation only works once. Subsequent clicks do not result in any animation. Below is my current JavaScript code: const sun = document.getEle ...

javascriptcssanimation

Resizing Bootstrap Modal using React with a Personalized Dimension

Is there a way to manually set the width of Bootstrap's Modal React component on my website? I want to be able to define the width in pixels, and if possible, use a const object in the .jsx file for CSS. If not, I can resort to using a .css file. Be ...

javascripthtmlcssreactjsfrontend

The function signature '(_event: React.SyntheticEvent, value: number) => void' cannot be assigned to the type 'FormEventHandler<HTMLUListElement>'

I am facing an issue with my component "PageFooter" being duplicated in three other components. I am trying to refactor it as a UI component. " I am getting the error message: 'Type '(_event: React.SyntheticEvent, value: number) = ...

javascriptreactjstypescriptnext.jsreact-typescript

Is the Date Epoch a reliable form of unique identification?

Currently, I'm developing a Node API and encountered a situation where I need to create a unique 15-digit random number for a model without using autoincrement. The challenge is to ensure that the generated number is not trivial. I am hesitant about ...

javascriptnode.jsmongodbtoken

"Use the data-attribute to dynamically append a child element to the

Here are a couple of divs that look like this: <div id="thisisme" data-order="1"> <div id="thisisme" data-order="2"> I am looking to insert some content into the specific div with data-order = 1. The following Javascript code is what I have t ...

javascriptnode.jselectronappendchild

In JavaScript or Typescript, using the return statement within the .then callback function nested inside the

Looking to filter an array, but it requires calling the database which returns a promise. Here's the code: this.arrayToFilter.filter(myObject => { this.dataBaseService.getSomething(myObject.id).then(something => { // performing som ...

javascripttypescript

Executing a JavaScript function upon page load without the need for an onclick event

I have a footer.php file that contains JavaScript code and functions which I use on all of my pages. While I usually call the function MyFunc() using onclick event when clicking buttons, there are some pages where I need to call it without any user interac ...

phpjavascripthtml

Error: Could not locate the module "../aws-exports"

Currently, as I work on building my project on Amplify hosting, I have encountered a front-end build issue. The technology stack I am using is Next.js. Error: ./src/pages/_app.js Module not found: Can't resolve '../aws-exports' in '/c ...

javascriptamazon-web-servicesnext.jsyamlaws-amplify

Is it possible for JavaScript to create an object that, when accessed directly, will return a string or number, and when its property is accessed, it will return that

something like this: const object = { value: 'value', label: 'label' } object === 'value' // true, accessing it directly returns 'value' object.label === 'label' // true object.value === 'value&ap ...

javascripttypescript

Error: The method .map is not a valid function in this context

I've decided to build a small To-Do app in order to enhance my knowledge of ReactJS and React Hooks. However, I'm facing an issue with the list.map() function that I'm using. The error message keeps saying that it's not a function, but ...

javascriptreactjsreact-hooks

Combining Mouseover and Click Events in Vue JS

Having four pictures, I want to display a specific component when hovering over them. However, I also need to bind the click event so that clicking on the picture will reveal the component. The challenge is that I am unable to simultaneously bind two event ...

javascriptvue.jsvuejs2onclick

Looking for assistance with my MEAN stack To Do App project development

For a test at an enterprise, I have been tasked with creating a "to do APP" using Node js, Express, MongoDB & Angular Js. This is new territory for me as I have never worked with the MEAN Stack before but I am excited to explore it! The base project has al ...

javascriptnode.jsangularjsmongodbmean-stack

Handling errors in Angular's $HTTP service

In my current implementation, I am handling a slow HTTP call in a rather basic manner. If the call takes more than 3 seconds, it is re-fired, and if it fails 4 times, the process is exited. While this method works, it involves a lot of code for just one ca ...

angularjshttperror-handling

exploring the depths of nested objects and utilizing the 'for in

My issue involves receiving a json response from an API that includes objects within objects. It looks something like this: {Object}->{results}->{manyObjects} When I execute the following code: var list = data.results.list; for(val in list){ ...

javascriptjsonobject

Leveraging AngularJS to fetch data from two distinct JSON files

I am faced with the challenge of incorporating 2 JSON file examples into my project. The format of each file is different, so I am exploring the best approach using an angular controller to handle them effectively. These JSON files are not being fetched fr ...

javascripthtmlarraysangularjs

Have you ever wondered why MEAN.js applications use the #! symbol at the start of their URLs

Embarking on my first MEAN application build using MEAN.JS, I was intrigued by the structure of how mean.js organizes the application, particularly why URLs begin with /#!/. For instance, for the login page, I envisioned: http://example.com/login instea ...

javascriptangularjsurlmean-stackmeanjs

What is the process for incorporating a compiled JavaScript library into a TypeScript project?

In my Typescript project (ProjectA), I am utilizing several node packages. Additionally, I have a babel project (ProjectB) with a build configuration that supports output for multiple module definition standards such as amd, common.js, and esm. My questio ...

javascripttypescriptbabeljs