Angularjs 使用nganimate/gsap在json工厂中迭代，使用ng repeat循环结果以更新视图

我在单独的文件中有一个json工厂引入引号，一个将工厂用作服务的控制器，以及一个带有模板的指令来更新视图

quoteFactory.js

var quoteFactory = angular.module('quoteFactory', []);

quoteApp.factory('famous', function ($http) {
  return {
    list: function(callback){
  $http.get('famous.json').success(callback);
    }
   };
 });

quoteControllers.js

var quoteControllers = angular.module('quoteControllers', []);

quoteControllers.controller('QuoteCtrl', function ($scope,$timeout, famous){
  famous.list(function(quotes) {
console.log(quotes);
$scope.quotes = quotes;
});
});

quote-div.html

    <div ng-controller="QuoteCtrl">
      <div class="container-fluid base" id="base">
        <div class="row" ng-repeat="famous in quotes">
    <div class="col-md-12">
    <br><br><br>

    <blockquote class="base bounceIn">

  <h2>&#8220;{{ famous.quote }}&#8221;</h2>

  <br>
  <footer>{{ famous.author }} via<cite title="Source Title">{{ famous.source }}</cite>                  </footer>
</blockquote>
<br>
<br>
</div>
</div>
<br>
</div>

我希望通过$timeout更新视图，在视图就绪、视图加载或角度文档就绪时，在无限循环中循环我的json以显示引号，使用animate.css或gsap（TweenMax）管理转换。包括工厂，控制器，应用程序和指令代码，以及说明我的工作

更新

我做了一些研究，发现我想要的是一个滑块。我发现了一个基于教程的插件，并决定实现它。发生的情况是，我收到了以下错误：

TypeError: undefined is not a function
at sliderFunc (http://localhost/romecode/assets/js/quoteDirective.js:34:10)
at link (http://localhost/romecode/assets/js/quoteDirective.js:40:3)


TypeError: Cannot read property 'forEach' of undefined
at Object.fn (http://localhost/romecode/assets/js/quoteDirective.js:22:16)

这是我的新报价指令

  var quoteDirective = angular.module('quoteDirective', []);

  quoteDirective.directive('quoteDirective', [function (famous, $timeout) {
    return {
    priority: 0,
    restrict: 'AE',
    scope: {
        quotes:"="
    },
    link: function (scope, elem, attrs, famous) {
        scope.currentIndex=0;

    scope.next=function(){
        scope.currentIndex<scope.quotes.length-1?scope.currentIndex++:scope.currentIndex=0;
    };

    scope.prev=function(){
        scope.currentIndex>0?scope.currentIndex--      :scope.currentIndex=scope.quotes.length-1;
    };

    scope.$watch('currentIndex',function(){
        scope.quotes.forEach(function(quotes){
            quotes.visible=false;
        });
        scope.quotes[scope.currentIndex].visible=true;
        console.log(scope.quotes);
    });

    /* Start: For Automatic slideshow*/

    var timer;

    var sliderFunc = function(){
        timer=$timeout(function(){
            scope.next();
            timer=$timeout(sliderFunc,5000);
        },5000);
    };

    sliderFunc();

    scope.$on('$destroy',function(){
        $timeout.cancel(timer);
    });

    /* End : For Automatic slideshow*/

    },
    templateUrl: 'quote-div.html'
    }
   }]);

var quoteDirective=angular.module（'quoteDirective'，[]）；
指令（'quoteDirective'，[函数（著名，$timeout）{
返回{
优先级：0，
限制：“AE”，
范围：{
引号：“=”
},
链接：功能（范围、元素、属性、著名）{
scope.currentIndex=0；
scope.next=函数（）{
scope.currentIndex0？scope.currentIndex-：scope.currentIndex=scope.quotes.length-1；
};
作用域$watch（'currentIndex'，函数（）{
scope.quotes.forEach（函数（引号）{
引号.visible=false；
});
scope.quotes[scope.currentIndex].visible=true；
console.log（scope.quotes）；
});
/*开始：用于自动幻灯片放映*/
无功定时器；
var sliderFunc=函数（）{
计时器=$timeout（函数（）{
scope.next（）；
计时器=$timeout（sliderFunc，5000）；
},5000);
};
sliderFunc（）；
作用域.$on（“$destroy”，函数（）{
$timeout.cancel（计时器）；
});
/*结束：用于自动幻灯片放映*/
},
templateUrl:'quote-div.html'
}
}]);

任何帮助都将不胜感激

  var quoteDirective = angular.module('quoteDirective', []);

  quoteDirective.directive('quoteDirective', [function (famous, $timeout) {
    return {
    priority: 0,
    restrict: 'AE',
    scope: {
        quotes:"="
    },
    link: function (scope, elem, attrs, famous) {
        scope.currentIndex=0;

    scope.next=function(){
        scope.currentIndex<scope.quotes.length-1?scope.currentIndex++:scope.currentIndex=0;
    };

    scope.prev=function(){
        scope.currentIndex>0?scope.currentIndex--      :scope.currentIndex=scope.quotes.length-1;
    };

    scope.$watch('currentIndex',function(){
        scope.quotes.forEach(function(quotes){
            quotes.visible=false;
        });
        scope.quotes[scope.currentIndex].visible=true;
        console.log(scope.quotes);
    });

    /* Start: For Automatic slideshow*/

    var timer;

    var sliderFunc = function(){
        timer=$timeout(function(){
            scope.next();
            timer=$timeout(sliderFunc,5000);
        },5000);
    };

    sliderFunc();

    scope.$on('$destroy',function(){
        $timeout.cancel(timer);
    });

    /* End : For Automatic slideshow*/

    },
    templateUrl: 'quote-div.html'
    }
   }]);