javascript - 卸载/销毁 Angular 延迟加载组件

Question

我的设置类似于此处找到的帖子 http://ify.io/lazy-loading-in-angularjs/在 Angular 中处理延迟加载我的应用程序的各种组件。

我遇到的问题是加载的组件越多，应用程序的内存占用量就会增加(很明显，我知道)。是否有一种干净的方法来“卸载”或“销毁”已延迟加载的 Angular 服务/ Controller /指令/等？

简单例子(供引用)

应用程序.js

var app = angular.module('parentApp', ['ui.router']).config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

        var app = angular.module('app', ['ui.router'])
            .config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {

                app.lazy = {
                    controller: $controllerProvider.register,
                    directive: $compileProvider.directive,
                    filter: $filterProvider.register,
                    factory: $provide.factory,
                    service: $provide.service
                };

                $urlRouterProvider.otherwise('/home');
                $stateProvider
                    .state('home', {
                        url: '/home',
                        templateUrl: 'views/main.html',
                        controller: 'MainCtrl'
                    })
                    .state('lazyLoad', {
                        url: '/lazyLoad',
                        templateUrl: 'views/lazyLoad.html',
                        controller: 'lazyLoadCtrl',
                        resolve: {
                            promiseObj: function ($q, $rootScope) {
                                var deferred = $q.defer();
                                var dependencies = [
                                    'scripts/controllers/lazyLoad.js'
                                ];

                                $script(dependencies, function () {
                                    $rootScope.$apply(function () {
                                        deferred.resolve();
                                    });
                                });

                                return deferred.promise;
                            }
                        }
                    });
            });

和延迟加载 Controller lazyLoad.js

angular.module('app')
  .lazy.controller('lazyLoadCtrl', function($scope){
        $scope.greeting = 'hi there';
      }
);

如果用户导航到 #/lazyLoad，应用程序将在 Controller (和 View )中加载，以及它被告知需要的任何其他内容。但是当用户离开 #/lazyload 时，我希望卸载/销毁所有先前加载的组件。

我将如何完全取消注册/销毁/卸载(不确定这里的正确动词是什么...)“lazyLoadCtrl” Controller 。如上所述，理想情况下，我希望能够在不再需要时卸载延迟加载的 Controller 、指令、过滤器、工厂和服务。

谢谢!

Answer 1

也许你可以尝试调用 scope.$destroy()

来自 angularjs 范围文档 https://docs.angularjs.org/api/ng/type/$rootScope.Scope

$销毁(); 从父作用域中移除当前作用域(及其所有子作用域)。删除意味着对 $digest() 的调用将不再传播到当前作用域及其子作用域。删除还意味着当前范围符合垃圾收集条件。

$destroy() 通常由 ngRepeat 等指令使用，用于管理循环的展开。

就在一个作用域被销毁之前，一个 $destroy 事件被广播到这个作用域上。应用程序代码可以注册一个 $destroy 事件处理程序，这将使其有机会执行任何必要的清理。

请注意，在 AngularJS 中，还有一个 $destroy jQuery 事件，可用于在从 DOM 中删除元素之前清理 DOM 绑定(bind)。