Angular Kendo-ui：js堆、节点和侦听器数量增加，有人可以告诉我如何避免节点、js堆和侦听器不断增加吗？

Question

我在我的应用程序中使用带有角度的剑道组件。我正在检查内存泄漏，我发现节点、侦听器、JS 堆不断增加。如果我最后点击垃圾收集，一切都会像以前一样恢复正常。我能够处理不断增加的文档数量，但无法处理 js 堆、节点和侦听器。 Google Chrome timeline snapshot & Timeline Capture with garbage collected in the end. 这是我的 appconfig.js 代码

angular.module("tilesApp").run(function ($rootScope, $location, $route, $http, AuthenticationService) {
//check cookie of user
if (getCookie('username') != "") {
    $rootScope.user = { identity: getCookie('username'), username: getCookie('username'), isAdmin: true };
    $rootScope.isLoggedIn = true;
}// enumerate routes that don't need authentication
var routesThatDontRequireAuth = ['/login'];
$rootScope.$on('$routeChangeStart', function (event, next, current) {
    var appElement = angular.element("#viewcontent");
    //$rootScope.$destroy();
    var appScope = angular.element(appElement).scope();
    if (typeof (appScope) !== "undefined") {
        var controllerScope = appScope.$$childHead;
        controllerScope.$destroy();
        controllerScope = null;
        var element = document.getElementById("viewcontent");
        while (element.lastChild) {
            element.removeChild(element.lastChild);
        }
        $("#viewcontent").empty();
    }

    if (next && next.$$route) {
        if (typeof ($rootScope.user) === "undefined" || typeof ($rootScope.isLoggedIn) === "undefined") {
            window.location = "/login";
        }
        else
            if ($rootScope.isLoggedIn === false || AuthenticationService.validateRole() === false) {
                window.location = "/login";
            }
    }
});

$http.get("/Scripts/app/routeconfig.txt").then(function (response) {
    var routes = response.data.routes;
    $rootScope.routes = routes;
    if (typeof (routes) !== "undefined") {
        for (var i = 0; i < routes.length; i++) {
            var url = routes[i].url;
            $routeProviderReference.when(url, { templateUrl: url, });
        }
    }
    $route.reload();
    var lis = "";
    for (var i = 0; i < $rootScope.routes.length; i++) {
        lis += "<li><a href='./#" + routes[i].url + "' >" + routes[i].displayName + "</a></li>";
    }
    angular.element('#navtabs').html(lis);
    $location.path(routes[0].url); //First route is assumed to be default route and hence user is navigated
}, function (errorResponse) {
    // Handle error case
    alert('Cannot load routes');
});});

这是另一个控制器代码：

angular.module('tilesApp').controller("kendoSearchCtrl", function ($scope) {
$scope.monthPickerConfig = {
    start: "day",
    depth: "day",
    format: "dd-MM-yyyy"
};$scope.startDate = "";
$scope.endDate = "";

$scope.selectOptions = {
    placeholder: "Select leaders...",
    dataTextField: "LeaderName",
    dataValueField: "EID",
    dataSource: {
        transport: {
            read: {
                url: "/Scripts/leaders.txt",
                dataType: "json"
            }
        }
    }
};
$scope.selectedIds = [];

$scope.choiceData = new kendo.data.DataSource({
    data: [{ text: "Foo", id: 1 },
        { text: "Bar", id: 2 },
        { text: "Baz", id: 3 }]
});
$scope.selectedChoiceId = 1;
$scope.checkboxModel = true;
$scope.businessModel = "";
$scope.dateType = null;

$scope.workSiteData = new kendo.data.DataSource({
    data: [{ text: "S1", value: 1 },
        { text: "S1", value: 2 },
        { text: "S2", value: 3 },
        { text: "S3", value: 4 },
        { text: "S4", value: 5 }]
});
$scope.workSite = null;

$scope.$on('$destroy', function () {

    kendo.destroy(document.body);
    kendo.destroy($scope.workSiteData);
    kendo.destroy($scope.choiceData);
    kendo.destroy($scope.selectOptions);
    kendo.destroy($scope.monthPickerConfig);


});

});

Answer 1

从 kendoSearchCtrl.js 和 appconfig.js 中删除了我的自定义清理代码。它就像魅力一样。 :)

1) 在 appconfig.js 中

$rootScope.$on('$routeChangeStart', function (event, next, current) {
    if (next && next.$$route) {
        if (typeof ($rootScope.user) === "undefined" || typeof ($rootScope.isLoggedIn) === "undefined") {
            window.location = "/login";
        }
        else
            if ($rootScope.isLoggedIn === false || AuthenticationService.validateRole() === false) {
                window.location = "/login";
            }
    }
});

2) 在 kendoSearchCtrl.js 中

$scope.$on('$destroy', function () {
    kendo.destroy(document.body);
    $('.view-root-node').html('');
});

No Leaks - Google Chrome TimeLine
有关更多信息，请参阅此链接： http://docs.telerik.com/kendo-ui/AngularJS/leak