0

Pessoal estou desenvolvendo uma aplicação mobile usando angular, e estou tentando montar uma linha do tempo como esta:

http://rp.js.org/angular-timeline/example/index.html documentação aqui: https://github.com/rpocklin/angular-timeline

o problema é que a diretiva angular-scroll-animate não está disparando quando há rolamento da página, e eu não faço idéia do que pode ser, a seguir meu código:

Controller:

angular.module('timeline', [
'angular-timeline',
'angular-scroll-animate'
])
.controller("TimeLineController", [
    "$scope",
    function ($scope) {
        $scope.events = [
            {
                badgeClass: 'warning',
                badgeIconClass: 'ion-information',
                title: 'titulo',
                content: 'conteúdo'
            },
            {
                badgeClass: 'danger',
                badgeIconClass: 'ion-heart',
                title: 'titulo',
                content: 'conteúdo'
            },
            {
                badgeClass: 'primary',
                badgeIconClass: 'ion-android-calendar',
                title: 'titulo',
                content: 'conteúdo'
            }
        ];

        $scope.animateElementIn = function ($el) {
            $el.removeClass('hidden');
            $el.addClass('animated fadeInRight '); // this example leverages animate.css classes
        };

        $scope.animateElementOut = function ($el) {
            $el.addClass('hidden');
            $el.removeClass('animated fadeOutRight '); // this example leverages animate.css classes
        };
    }]);

CSS

<style>
    .hidden { visibility: hidden; }
</style>

HTML

<ion-view view-title="Linha do Tempo">
<ion-content>
    <timeline>
        <timeline-event ng-repeat="(key,event) in events" side="">
            <div when-visible="animateElementIn" when-not-visible="animateElementOut" delay-percent="0.50" class="hidden">
                <timeline-badge class="{{event.badgeClass}}">
                    <i class="glyphicon {{event.badgeIconClass}}"></i>
                </timeline-badge>
                <timeline-panel class="{{event.badgeClass}}">
                    <timeline-heading>
                        <h4>{{key+1}}º - {{event.title}}</h4>
                    </timeline-heading>
                    <p>{{key+1}}º - {{event.content}}</p>
                </timeline-panel>
            </div>
        </timeline-event>
    </timeline>
</ion-content>

Desculpe se não segui alguma regra com a pergunta estou começando agora Desde já agradeço a ajuda !

2
  • Você não possui nenhum erro? Está fazendo load do arquivo corretamente? 6/05/2016 às 15:06
  • não Celson, não me é exibido nenhum erro, e sim todos os arquivos foram carregados corretamente (todos testados individualmente) 6/05/2016 às 15:44

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .