javascript - 带有 $http 的 AngularJS 指令会造成内存泄漏 - .resolve 似乎不起作用？

Question

我似乎有一个问题，我认为我看不到解决方案，也许有人可以提供帮助...我有一个 AngularJS 指令，它发出一个 $http 请求，返回 HTML 和当有内容时，我将它注入(inject)我的 View - 我知道这不是很好，HTML 的返回应该替换为 JSON 和模板的使用，但我无法控制从 $http 请求返回的内容。该指令采用一些参数/属性来获取正确的内容，并且一切似乎都有效。在我看来，直接通常在 7 个位置，一个在我的导航中，我使用 ng-include 添加到我的索引中，在我的页脚中三次，我使用 ng-include 添加到我的 index.html然后该指令出现在我拥有的 ng-view 标记中，该标记可以在每个 View 中出现 0 到 3 次。这是我的 HTML 中的指令

<div data-cms-inject data-page-name="homePageContent" data-slot-name="slot1"></div>

这是 JS...

.directive('cmsInject', ['$rootScope', '$q', '$http', function ($rootScope, $q, $http) {
        'use strict';
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {

                var canceller = $q.defer(),
                    cmsPromise = $http({
                    url : 'url/to/feed',
                    timeout: canceller.promise,
                    method: 'POST',
                    data: [{
                    pageName: attrs.pageName,
                    slotName: attrs.slotName
                    }]
                });

                cmsPromise.success(function(data) {

                    var resp = data[0];

                    if(resp.replace(/\s{1,}/,'').replace(/\r?\n|\r/g,'') !== 'null') {
                        element.html(resp);
                    }
                    console.log('new request success');
                    $rootScope.$broadcast('cmsLoaded');
                }).error(function(data) {
                    console.log('new request error', data);

                }) ;

                $rootScope.$on('$locationChangeStart', function () {
                    console.log('$locationChangeStart');
                    canceller.resolve('locationChange');
                });

            }
        };
    }])

现在这似乎工作正常，但当我在我的应用程序的 View 之间快速导航时，我注意到应用程序似乎变慢，然后浏览器崩溃，因此我们有内存泄漏。起初我认为这是由于挂起的 $http 调用引起的，但是当我尝试使用超时和“$locationChangeStart”事件解决这些问题时，问题仍然存在。然后我尝试写入控制台以查看发生了什么...这是我的输出...

这是当我加载应用程序时，我们有 7 个指令实例，3 个在 ng-view 内，4 个在 ng-includes 外

7 new request success

然后我切换到一个没有指令的新 View

7 $locationChangeStart

然后我导航回原来的 View

7 $locationChangeStart
3 new request success

我再次切换到一个没有指令的新 View

10 $locationChangeStart

我导航回原来的 View

10 $locationChangeStart
3 new request success

我再次切换到一个没有指令的新 View

13 $locationChangeStart

最后回到原来的样子

13 $locationChangeStart
3  new request success

这里有些奇怪，因为调用 $locationChangeStart 事件的次数增加了，比指令在页面中出现的次数更多，ng-include + ng-view 任何人都可以看到我在这里做错了什么，一些指令我猜是留在内存/DOM 中吗？

Answer 1

可以解释事件处理程序数量的增加:

$rootScope.$on('$locationChangeStart'

您将事件处理程序附加到 $rootScope，当然，当指令的生命周期结束时，它不会消失。事件处理程序应附加到 scope。