Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I have a ng-repeat list that updates every minute. Its a list of cards that contains stuff like title, description, dates and so on. In those cards there's also a angular-ui-bootstrap popover which i use to display comments on those cards.

When the list updates, the popover will keep some reference which creates a lot of detached dom elements.

Heres some of the code.

The directive i use.

    .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();
            });
        }
    }
})

from the html.. The bo-something is the just a one way bind i use instead of the normal double bind from angular

 <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>

Heres a heap-snapshot of the site after one update. http://i.stack.imgur.com/V4U1O.png

So Im fairly bad at javascript in general, and i have my doubts about the directive. I would have thought that the .popover('destroy') would remove the reference, but it doesnt seem to..

Any help is greatly appreciated..

share|improve this question
    
Other than puzzling var _this = this; that you don't use, your code looks fine. Why do you think you have memory leak? –  Dmitri Zaitsev Aug 20 at 14:34
    
I mean this completely non-snarky, but you might want to buf up your JS skills before diving head-first into AngularJS...that is if you think you're bad a JS... –  gonzofish Aug 22 at 17:20
    
also can I recommend you use AngularUI's Boostrap modules? They're native to Angular and are really well-done & tested. –  gonzofish Aug 22 at 17:22
    
My javascript is not great i know.. Its honestly been so long since ive worked on this i cannot actually remember the whole thing. I no longer have the projectcode, it was a project i made in my internship. I cannot quite recall why i didnt use angularUI bootstraps popover, it must have been some functionality it was lacking or something. I guess this problem might not exist anymore. –  Misk Aug 23 at 22:14

1 Answer 1

Why are you constantly destroying the popup over and over? There is no need to destroy the popup every time the mouse is moved. Just show and hide the popup. It's much nicer on memory than constantly destroying and recreating the popup.

But, what you may not realize is that bootstrap components don't play well with AngularJS. Bootstrap components weren't architected in ways that allow the content within them to be updated easily which poses problems when you use them with AngularJS because the update model is built into the framework. And that's why the AngularUI project rewrote their Javascript components from the ground up in AngularJS so they behave as you would expect. I think you'll find those much easier to use.

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

If you are using bootstrap 2.3 AngularUI v0.8 was the last version supporting bootstrap v2.3.

share|improve this answer
    
Its been a while since ive looked at this, and i dont quite recall too much. I no longer have the code either, it was a part of a project i did in my internship. –  Misk Aug 23 at 22:15
    
the whole deal with $(this).popover('destroy'); $('.popover').remove(); i put in everywhere was me trying to remove the references that were kept in the memory. Unfortunately i dont really recall much of this whole issue :( –  Misk Aug 23 at 22:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.