AngularJS - $scope.$destroy does not eliminate listeners

Question

AngularJS - $scope.$destroy does not eliminate listeners

I am currently exploring how to develop my own "one-time binding" functionality for AngularJS version 1.2 and earlier. I came across this response which explains the process of creating a custom bindOnce directive. Upon using the provided directive:

    app.directive('bindOnce', function() {
    return {
            scope: true,
            link: function( $scope ) {
                setTimeout(function() {
                    $scope.$destroy();
                }, 0);
            }
        }
    });

The data is bound only once. However, I noticed that even though the data is bound once, the $$watchers are still active. You can verify this by checking the watcher count in the following JSBin example - running the commented watcher count code in the console displays that the watchers are still present.

UPDATE: Interestingly, when utilizing the same directive with Angular 1.3, the watcher count actually becomes 0!!!

javascript angularjs angularjs-scope

Answer 1

Answer №1

Utilize the cleanup method to eliminate watchers:

function cleanup(element) 
  { 
  element.off().removeData();

  var injector = currentSpec.$injector;

  element.$injector = null;

  // clearing jQuery's fragment cache
  angular.forEach(angular.element.fragments, function(val, key) {
    delete angular.element.fragments[key];
  });

  angular.forEach(angular.callbacks, function(val, key) 
    {
    delete angular.callbacks[key];
    });

  angular.callbacks.counter = 0;
  }

Implement a self-destructing service as a one-time binding solution:

function onetime()
  {
  /*...*/
  onetime = Function;
  }

angular.module('myApp').constant('bindonce', onetime);

angular.module('myApp').controller('foo', function($bindonce){
  this.$inject = '$bindonce';
  $scope.mybind = $bindonce();
}

Consult the migration guide for insight into any disruptive changes:

Resources

Answer 2

Utilize the cleanup method to eliminate watchers:

function cleanup(element) 
  { 
  element.off().removeData();

  var injector = currentSpec.$injector;

  element.$injector = null;

  // clearing jQuery's fragment cache
  angular.forEach(angular.element.fragments, function(val, key) {
    delete angular.element.fragments[key];
  });

  angular.forEach(angular.callbacks, function(val, key) 
    {
    delete angular.callbacks[key];
    });

  angular.callbacks.counter = 0;
  }

Implement a self-destructing service as a one-time binding solution:

function onetime()
  {
  /*...*/
  onetime = Function;
  }

angular.module('myApp').constant('bindonce', onetime);

angular.module('myApp').controller('foo', function($bindonce){
  this.$inject = '$bindonce';
  $scope.mybind = $bindonce();
}

Consult the migration guide for insight into any disruptive changes:

Resources

AngularJS - $scope.$destroy does not eliminate listeners

Answer №1

Similar questions

Transforming a simple MySQL query into a structured nested JSON format

Flick user media cards left or right to uncover the following one

Here is a unique version of the text: "Implementing a JavaScript function in Angular to activate the data-bs

Problems with Navbar rendering on multiple occasions

Error message: Unchecked runtime error - Unable to retrieve data from the specified URL. The extension manifest must include permission to access this particular host. This issue is occurring in manifest

What steps should I take to address a situation in which a Protractor test becomes stuck indefinitely?

transfer jquery element using jquery ajax

Running asynchronous calls in node.js using express

Retrieve the IDs of list elements in order to dynamically update a div using AJAX

Having trouble with implementing ng-hide and ng-show functionality

Is it possible to implement hierarchical validation within reactflow nodes?

Wait to display the page until receiving a response from the $http.get request

Steps for programmatically closing a Dialog Window in a showmodeldialog window

Guide to Implementing i18n-iso-countries Library in React

Is there a way to halt or end an interval within a function triggered by useEffect()?

The Javascript functionality does not seem to be functioning properly within the Bootstrap navigation

Retrieve data from a text file using ajax and then return the string to an HTML document

NodeJS API integration failure during ReactJs login attempt

Utilizing ng-change in an AngularJS directive with isolated scope to transition towards a component-based architecture. Let's evolve our approach

Eliminating unnecessary gaps caused by CSS float properties