ngRepeat removes tooltip styling

Question

Thanks in advance for any help.

I have a jquery tooltip that is styled, but when it is used in an ngRepeat the custom styling of the tooltip is removed and I'm not sure why.

Examples:

Tooltip shows up with correct styling:

<div class="toggle">
    <input type="checkbox" id="amount_{{i.ProductCode}}" name="amount" data-ng-model="$parent.amount" value="{{i.ProductCode}}" data-ng-required="1" /> 
    Hello&nbsp;<span class="info-tip" title="World!"></span>
</div>

Tooltip shows up with default styling:

<div data-ng-repeat="i in options.amounts" data-ng-cloak="">
    <div class="toggle">
        <input type="checkbox" id="amount_{{i.ProductCode}}" name="amount" data-ng-model="$parent.amount" value="{{i.ProductCode}}" data-ng-required="1" /> 
        Hello&nbsp;<span class="info-tip" title="World!"></span>
    </div>
</div>

I've spent quite a while looking into it, and from what I can gather from my research it seems to be an ngRepeat scoping issue. However I'm not certain that this is the issue and I'm not sure how to go about fixing it if it is (hence coming here). Ideally I would like to use ngRepeat and maintain my custom tooltip styling.

Any guidance is appreciated, thanks!

Answer 1

The solution was to "refresh" the dynamic elements in the repeater after the repeater has been initialised and rendered.

Create new directive to broadcast when the ngRepeat has finished rendering:

app.directive('onFinishRender', ["$timeout",function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    };
}]);

In the controller create a listener for the broadcast that then updates the parent of the tooltip (which in turn updates the tooltip):

$scope.$on('ngRepeatFinished', function (e) {
        window.hbf.angular.components.byName("components/Tooltip")
            .update($('.parentClass'));
    });

Add 'on-finish-render="ngRepeatFinished"' to the ngRepeat in the ascx:

<div data-ng-repeat="i in items" data-ng-cloak="" on-finish-render="ngRepeatFinished">

Reasoning : On the page load event the jQuery binds the custom tooltip class to tooltip function. However, when it's used in the repeater the event is fired after the page load and there is no existing binding. Therefore it is necessary to bind newly created elements to the tooltip again to "refresh" them and have them display.

Basically the jQuery is initialised and rendered, but the ngRepeat is on the client side. Each repeat is dynamically generated with the scope of the child, not the parent, so all original bindings are out of scope and need to be re-binded after the ngRepeat has been created.

If anyone wants more info on how I went about this I posted it on my development blog which you can find here .