ngRepeat удаляет всплывающую подсказку

Question

Заранее благодарим за любую помощь.

У меня есть всплывающая подсказка jquery, которая стилизована, но когда она используется в ngRepeat, пользовательский стиль всплывающей подсказки удаляется, и я не уверен, почему.

Примеры:

подсказки показывает с правильной укладкой:

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

Я провел некоторое время, глядя на него, и из того, что я могу собрать из своих исследований, похоже, это проблема ngRepeat. Однако я не уверен, что это проблема, и я не уверен, как это сделать, если это так (следовательно, здесь). В идеале я хотел бы использовать ngRepeat и поддерживать свой собственный стиль подсказки.

Любые рекомендации приветствуются, спасибо!

Answer 1

Решение состояло в том, чтобы «обновить» динамические элементы в ретрансляторе после того, как повторитель был инициализирован и отображен.

Создать новую директиву вещать, когда ngRepeat закончил рендеринг:

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

В контроллере создать приемник для вещания, который затем обновляет родительский подсказке (который, в свою очередь, обновляет всплывающую подсказку):

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

Добавить 'на финиш-рендеринга = "ngRepeatFinished"' к ngRepeat в ASCX:

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

Причина:: На этапе загрузки страницы jQuery привязывает пользовательский класс всплывающей подсказки к функции всплывающей подсказки. Однако, когда он используется в повторителе, событие запускается после загрузки страницы и нет существующего связывания. Поэтому необходимо снова привязать вновь созданные элементы к подсказке, чтобы «обновить» их и отобразить.

В основном jQuery инициализируется и визуализируется, но ngRepeat находится на стороне клиента. Каждое повторение динамически генерируется с учетом объема дочернего элемента, а не родителя, поэтому все исходные привязки выходят за пределы области видимости и должны быть повторно привязаны после создания ngRepeat.

Если кто-то хочет получить дополнительную информацию о том, как я это сделал, я разместил его на своем development blog, который вы найдете here.