javascript - AngularJS 和 jQuery/Angular Bootstrap 的内存泄漏

Question

我有一个每分钟更新一次的 ng-repeat 列表。它是一个卡片列表，其中包含标题、描述、日期等内容。在这些卡片中还有一个 angular-ui-bootstrap 弹出窗口，我用它来显示这些卡片上的评论。

当列表更新时，弹出窗口将保留一些引用，这会创建大量分离的 dom 元素。

这是一些代码。

我使用的指令。

    .directive('mypopover', function ($compile, $templateCache) {

    var getTemplate = function (contentType) {
        var template = '';
        switch (contentType) {
            case 'user':
                template = $templateCache.get("templateId.html");
                break;
        }
        return template;
    }
    return {
        restrict: "A",
        link: function ($scope, element, attrs) {
            var popOverContent;

            popOverContent = getTemplate("user");

            popOverContent = $compile("<span>" + popOverContent + "</span>")($scope);

            var options = {
                content: popOverContent,
                placement: "bottom",
                html: true,
                trigger: "manual",
                selector: '.fa-comment',
                date: $scope.date,
                animation: true
            };

            $(element).popover(options).on("mouseenter", function () {
                var _this = this;
                $(this).popover("show");
                $('.popover').linkify();
                $(".popover").on("mouseleave", function () {
                    $(this).popover('destroy');
                    $('.popover').remove();
                });
            }).on("mouseleave", function () {
                var _this = this;
                setTimeout(function () {
                    if (!$(".popover:hover").length) {
                        $(this).popover('destroy');
                        $('.popover').remove();
                    }
                }, 350);
            });

            var destroy = function () {
                $(element).popover('destroy');
            }

            $scope.$on("$destroy", function () {
                destroy();
            });
        }
    }
})

来自 html..bo-something 是我使用的一种单向绑定(bind)，而不是来自 Angular 普通双绑定(bind)

 <a bo-href="c.ShortUrl" target="_blank" bindonce ng-repeat="c in cards | filter:searchText | limitTo: limitValue[$index] track by c.Id">
                    <div class="panel detachable-card">
                        <div class="panel-body" bo-class="{redLabel: c.RedLabel, orangeLabel: c.OrangeLabel}">
                            <!-- Comments if any -->
                            <script type="text/ng-template" id="templateId.html">
                                <div ng-repeat="comment in c.Comment track by $index">
                                    <strong style="margin-bottom: 20px; color:#bbbbbb; white-space: pre-wrap;">{{c.CommentMember[$index]}}</strong>
                                    <br />
                                    <span style="white-space: pre-wrap;">{{comment}}</span>
                                    <hr />
                                </div>
                            </script>
                            <span bo-if="c.Comment" data-container="body" mypopover style="float:right"><i class="fa fa-comment fa-lg"></i></span>

                            <!-- Card info -->
                            <strong style="font-size:12px; color:#999999"><span bo-if="!c.BoardNameOverride" bo-text="c.NameBoard"></span> <span bo-if="c.BoardNameOverride" bo-text="c.BoardNameOverride"></span></strong>
                            <br />
                            <strong bo-text="c.Name"></strong>
                            <br />
                            <span bo-if="c.Desc" bo-text="c.Desc"><br /></span>

                        </div>
                    </div>
                </a>

这是一次更新后网站的堆快照。 /image/V4U1O.png

所以总的来说，我对 javascript 的了解相当差，而且我对该指令持怀疑态度。我本以为 .popover('destroy') 会删除引用，但似乎并没有..

非常感谢任何帮助..

Answer 1

为什么你要一遍又一遍地破坏弹出窗口？无需在每次移动鼠标时销毁弹出窗口。只需显示和隐藏弹出窗口即可。这比不断销毁和重新创建弹出窗口更节省内存。

但是，您可能没有意识到引导组件不能很好地与 AngularJS 配合使用。 Bootstrap 组件的架构方式不允许轻松更新其中的内容，当您将它们与 AngularJS 一起使用时，这会带来问题，因为更新模型内置于框架中。这就是为什么 AngularUI 项目用 AngularJS 从头开始​​重写了 Javascript 组件，以便它们的行为符合您的预期。我想您会发现它们更容易使用。

http://angular-ui.github.io/bootstrap/

如果您使用的是 bootstrap 2.3 AngularUI v0.8 是支持 bootstrap v2.3 的最后一个版本。