AngularJS 中 $onDestroy 方法中的停止事件答案

【问题标题】：Stop events in $onDestroy method in AngularJSAngularJS 中 $onDestroy 方法中的停止事件
【发布时间】：2018-07-30 08:06:53
【问题描述】：

我正在 AngularJS 中开发一个相当大的应用程序，为了避免内存泄漏，我们在 $onDestroy 方法中实现内存释放，问题是有些变量变成了 undefined 但是，ng-change事件不断来自 HTML，我有一些错误。有什么方法可以将所有 HTML 与控制器断开连接？或者至少停止来自前端的所有事件？我正在使用 AngularJS 1.6。

这是我如何定义组件的示例：

function requestListController($uibModal, urlRest, $stateParams, $state, uiGridConstants, $filter, httpService) {
    var ctrl = this;

    ctrl.$onInit= function() {
        // ALL DATA INITIALIZATION
        ctrl.requestListGridOptions.data = [];  

        // GETTING EXTERNAL DATA
        httpService.get(url, true)
           .then(function(response){
                console.log("initRequestList - data.RequestListTO : " , response.RequestListTO);
                angular.copy(response.RequestListTO.requests, ctrl.requestListGridOptions.data);

        }) .catch(function onError(response) {
               // Handle error
               var status = response.status;
               console.log("initRequestList - error : " + status);
        });
    };

    //////////////////////////////
    //                          //
    // on$Destroy method        //
    //                          //
    //////////////////////////////
    ctrl.$onDestroy = function() {
        ctrl.status=undefined;
        ctrl.requestListGridOptions=undefined;
    };

    // OTHER METHODS                
};
//Inject dependencies
requestListController.$inject = [ '$uibModal', 'urlRest', '$stateParams', '$state', 'uiGridConstants', '$filter', 'httpService'];

pomeApp.component('requestList', {
    templateUrl: 'request/requestList/requestList.template.html',
    controller: requestListController
});

这更像是我的组件的结构。

【问题讨论】：

如果您提供问题的Minimal, Complete, and Verifiable example 会有所帮助。断开 HTML 与控制器的连接？控制器总是连接到它们的 HTML。 ng-change 事件不会停止。它们可以被忽略，但在链接作用域被销毁之前它们不会停止。
示例应该是完整的。应该有足够的信息，以便其他人可以重现该问题。如果使用 AngularJS 指令将事件处理程序正确添加到 DOM，它们将在作用域被销毁时释放。内存泄漏来自其他地方。
试试ctrl.requestListGridOptions.data.length=0。这将清空数组而不破坏引用。

标签： angularjs angularjs-components

【解决方案1】：

我猜你误解了onDestroy 事件。主要是去除$rootScope.$on(...)的超时或间隔或事件。

ng-change 事件绑定到作用域。这意味着如果范围被删除，它将自动销毁。因此，整个作用域不会被破坏，您还有另一个问题。

如果您有一个大型应用程序和一个范围或类似的东西，您应该使用ng-if 删除不应显示的部分。如果 ng-if 的变量为 false，这将删除 DOM 元素以及所有观察者。

如果您没有任何适当的代码，没有人可以真正帮助您，只是猜测您的问题可能是什么。

【讨论】：

嗨，也许正如你所说，我误解了 $onDestroy，问题是作用域不会自动销毁自己，而且我有相当大的内存泄漏。我在组件级别工作，我从不使用 rootScope、watcher、timer，我只注入帮助我管理系统的服务，注入的服务可以阻止作用域的破坏吗？感谢您的帮助。
除了您的应用程序结构之外，没有什么可以阻止范围的破坏。只能保留一些 $rootScope 观察者等，但它们不会阻止破坏。你如何实现你的组件？您有一个大的单个文件还是有多个具有不同组件的站点？要获得良好的结构，您需要使用 ng-view 或 ng-if 来删除 DOM 元素和绑定的控制器。

【解决方案2】：

您首先需要查看订阅了多少事件。然后在销毁中，您可以取消订阅所有这些事件。有时，我们还使用必须销毁的指令。或者这些指令中有一些逻辑需要清理。此外，如果您订阅了根作用域上的任何事件，即使本地作用域被销毁，它也会继续存在。

【讨论】：