Question

来自directives的AngularJS开发人员指南文档中有一条说明： ......

如果指令被删除，那么我们就不会引入内存泄漏

任何人都可以详细说明这一点。如何删除指令，它首先在模板中为HTML提供动态功能。现在据我所知，一个指令可以修改一个元素并删除它。但为什么要删除自己？

Answer 1

我想我现在明白了。我认为这将是相当

如果DOM节点或服务被删除，我们注册了一个监听器，我们就不会引入内存泄漏。现在仔细查看以下代码。

<body>
    <div class="container">
        <div ng-controller="MyController">
            Date format: <input ng-model="format"> <hr>
            Current time is: <span my-current-time="format"></span>
        </div>
    </div>
</body>
<script>
    angular.module('app', [])

    .controller('MyController', function ($scope) {
      $scope.format = 'M/d/yy h:mm:ss a';
    })

    .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {
      return {
        link: function (scope, element, attrs) {
          var format, timeoutId;

          function updateTime() {
            console.log('hi');
            element.text(dateFilter(new Date(), format));
          }

          scope.$watch(attrs.myCurrentTime, function(value) {
            format = value;
            updateTime();
          });

          /*element.on('$destroy', function () {
            console.log('hello');
            $interval.cancel(timeoutId);
          });*/

          timeoutId = $interval(function () {
            updateTime();
          }, 1000);

          element.remove();
        }
      };
    }]);
</script>
</html>

这里我们已经注释掉了应该清理在DOM节点上注册的侦听器的代码。在代码的最后，我们手动删除了DOM node。删除DOM node后，不再调用updateTime函数。但正如我们在updateTime中看到的那样，它不断调用console函数。但是，如果我们从注释掉的代码中删除注释，它会处理清理注册器的注册。正如您在控制台中看到的那样，在代码末尾删除节点后，不再调用updateTime函数。

AngularJS＆＃39;如果该指令被删除，那么我们就不会引入内存泄漏问题＆＃39;

1 个答案: