Resolved issue with $watch repeatedly triggering due to missing ng-hide functionality

Question

Resolved issue with $watch repeatedly triggering due to missing ng-hide functionality

I am facing a scenario where I am fetching JSON data from a backend and then rendering it using a template that contains several ng-show directives.

<div>
    <span ng-show="config.displayMode == 'A'" class="ng-binding">${A}</span>
    <span ng-show="config.displayMode == 'B'" class="ng-binding">${B}</span>
    <span ng-show="config.displayMode == 'C'" class="ng-binding">${C}</span>
</div>

Upon receiving new data, the template removes the existing elements and renders new ones.

Although this process works correctly and efficiently, I have observed through the Batarang performance tool that watches are being leaked every time elements are removed. As this page remains open for extended periods, the memory usage and digest time gradually increase, which is something I want to prevent.

EDIT The elements are removed using the .empty() function of jQuery.

As requested, I have created a plunkr. The example is simple, adding an element with an ng-show every time something is typed in a box. If the box is cleared, the ng-show elements are deleted. By using Batarang, you can see that watches persist on the performance tab.

MY Question How can I clear the watches created by an ng-show directive?

javascript angularjs angularjs-directive

Answer 1

Answer №1

If I interpret your message correctly, implementing this solution may resolve your issue:

app.directive('myDirective', function($compile) {
  return {
    restrict: 'A',
    scope: {
      myDirective: '='  
    },
    link: function($scope, elem, attr, ctrl) {
      $scope.$watch('myDirective', function(){
        if($scope.myDirective.length > 5){
          elem.append("<div class='second'>Length is greater than 5</div>")
        } else {
          elem.empty();
        }
      });
    }
  };
});

The issue in your code is that you are not actually removing the elements from the DOM. Instead, you are simply hiding them, causing the watchers to remain active. Refer to this Plunker for implementation.

Here is a screenshot illustrating the elements that will not be correctly removed with your current code:

Answer 2

If I interpret your message correctly, implementing this solution may resolve your issue:

app.directive('myDirective', function($compile) {
  return {
    restrict: 'A',
    scope: {
      myDirective: '='  
    },
    link: function($scope, elem, attr, ctrl) {
      $scope.$watch('myDirective', function(){
        if($scope.myDirective.length > 5){
          elem.append("<div class='second'>Length is greater than 5</div>")
        } else {
          elem.empty();
        }
      });
    }
  };
});

The issue in your code is that you are not actually removing the elements from the DOM. Instead, you are simply hiding them, causing the watchers to remain active. Refer to this Plunker for implementation.

Here is a screenshot illustrating the elements that will not be correctly removed with your current code:

Resolved issue with $watch repeatedly triggering due to missing ng-hide functionality

Answer №1

Similar questions

Removing an element from an array by evaluating each item within the array

Storing user information in Angular after login and implementing JWT authentication

What is the best way to merge two fetch requests in order to gather the required data?

Can you explain the significance of npm WARN excluding symbolic link?

The value stored in $_POST['valuename'] is not being retrieved

Make sure a div is displayed on top of any content currently in fullscreen mode

Navigating the Angular (ng-Grid) testing waters: emitting an event with data using Jasmine

Updating cannot be done while rendering, within the onError function of the Image

Struggling to make React respond to button clicks without resorting to using addEventListener

Is it possible to interact with Java SE jars using JavaScript?

What is the method for getting js_xlsx to include all empty headers while saving the file?

Assessing the validity of a boolean condition as either true or false while iterating through a for loop

Images not showing in Vue.js

What is the best way to access a variable from one JavaScript file in a different file?

Automated tool for generating random JSON objects

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

Using the length of an array as an iterator within a nested ngFor loop in Angular 9

Is there a method in Angular JS to monitor modifications in the DOM that doesn't involve using scope.watch?

Tips for improving communication between sibling directives in AngularJS applications

Maintaining a JavaScript script within the local project directory and integrating it for use with Angular