Угловой бутстрап-материал-дизайн удаляет эффект пульсации в ng-repeat

Question

Я использую bootstrap-material-design в своем приложении для угловых. Эффект пульсации хорошо работает во всем приложении, хотя при использовании ng-repeat я теряю эффект пульсации.

Я создал товар за пределами ng-repeat в том же <ul> и отлично работает.

Это вызвано из-за ng-repeat создает новую область видимости? Если да, то как я должен правильно подойти ...?

Есть что-то, что мне не хватает в моем коде?

<ul class="list-unstyled"> 
    <li class="btn" ng-repeat="data in eventsData"> 
    {{data.title}} 
    </li> 
</ul> 

Answer 1

Глядя на документацию (очень интересный проект кстати) я могу видеть, что вы не используете классы или метки, которые вызывают пульсацию. Это те, по умолчанию:

"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple" 

Попробуйте добавить .withripple класс, или с помощью кнопки/с метками внутри ваших Li тегов

Answer 2

Добавления .withripple на <ul> группы будет применяться пульсацией ко всему списку, но это не сработает, чтобы применить рябь к отдельным элементам. Если вы загружаете список динамически, повторяющиеся элементы будут созданы после инициализации библиотеки Bootstrap Material, поэтому рябь не будет применяться к этим элементам.

Чтобы исправить это, мы должны добавить класс .withripple к повторяющимся элементам, а затем инициализировать библиотеку после того, как список закончит повторение, чтобы применить пульсацию. Это можно сделать легко, используя Угловые директивы:

var app = angular.module('gradebook', []); 
app.directive('repeatRipple', function() { 
    return function(scope, element, attrs) { 
    if (scope.$last) { 
     return $.material.init(); 
    } 
    }; 
}); 

... 

<ul> 
    <li ng-repeat="item in items" class="withripple" repeat-ripple> 
<ul>