Question

我有一个带有ng-click属性的按钮。如果我删除ng-click属性，则侦听器仍然存在。删除ng-click属性后，如何删除事件侦听器？

＆＃13;

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++;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

要删除兄弟指令，请在没有兄弟指令的情况下重新编译元素并替换元素。

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);
      });
    }
  };
});

删除指令属性不会删除侦听器

1 个答案: