CODEWITHSUNDEEP
angularjsangularjs-directivedom-events
Ryan Helmoski
Ryan Helmoski

Reputation: 359

Removing directive attribute does not remove listener

I have a button with a ng-click attribute. If I remove the ng-click attribute, the listener persists. How can I remove the event listener when I remove the ng-click attribute?

angular.module('testApp', ['ng'])
  .directive('testDir', testDir)
  .controller('testCtrl', testCtrl);

function testDir() {
  return {
    compile: (elem, attrs) => {
      // Remove ng-click attribute
      elem.removeAttr('ng-click');
    }
  };
}

function testCtrl($scope) {
  $scope.count = 0;

  $scope.handleClick = function() {
    $scope.count++;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp">
  <div ng-controller="testCtrl">
    <button test-dir ng-click="handleClick()">Click Me</button>
    <p>
      Count: {{count}}
    </p>
  </div>
</div>

Upvotes: 0

Views: 587

Answers (1)

georgeawg
georgeawg

Reputation: 48968

To remove sibling directives, re-compile the element without the sibling directives and replace the element.

angular.module('testApp').directive('testDir', function($compile) {
  return {
    link: (scope,elem, attrs) => {
      // Remove ng-click attribute
      attrs.$set('ngClick');
      // Prevent infinite recursive re-compile
      // Remove test-dir attribute
      attrs.$set('testDir');
      //Change button text
      elem.text("New Click Me")
      //re-compile
      var newLinkFn = $compile(elem);
      //replace
      newLinkFn(scope, function transclude(clone) {
          elem.replaceWith(clone);
      });
    }
  };
});

Upvotes: 1

Related Questions