Question

我是anugular js的新手，正在使用简单的模块，即Image Slider。

在本单元中，我刚刚更改了主页上的图像。一切都很好。但是现在，我想使用一些动画，就像显示下一个图像一样，然后前一个图像将隐藏并具有淡入淡出效果。

为了使用动画，我使用了角度动画插件。当我将此插件包含到m app中时，浏览器会显示错误，如下所示：

TypeError: fn is not a function
at angular.js:16299
at completeOutstandingRequest (angular.js:4924)
at angular.js:5312

我的自定义图像滑动JS是：

var ps_mobile_app = angular.module('app', ['ngAnimate', 'ngRoute', 'ngCookies']);
ps_mobile_app.directive('slider', function($timeout) {
return {
    restrict: 'AE',
    replace: true,
    scope: {
        images: '='
    },
    link: function(scope, elem, attrs) {
        scope.currentIndex = 0;

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

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

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

        /* 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: 'shared/image-slider/slider.html'
}

}）;

我的图像滑块模块html是：

<div class="slider">  
 <div class="slide" ng-repeat="image in images" ng-show="image.visible">  
  <img ng-src="{{image.src}}" />  
 </div>  
 <div class="arrows">  
  <a href="#" ng-click="prev()">  
    <img src="shared/image-slider/img/left-arrow.png" />  
  </a>  
  <a href="#" ng-click="next()">  
    <img src="shared/image-slider/img/right-arrow.png" />  
  </a>  
 </div>  
</div>

我在m主页中使用上述模块：

<slider images="slider_images" />

使用上面的代码图像滑块工作正常，而不使用Angular Animate插件。但是使用Angular Animate，我收到了这个错误。经过一点分析后，我认为它是由于超时功能而发生的。

有人可以帮我解决这个问题吗？在此先感谢

Answer 1

尝试

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

TypeError：fn不是angularjs

1 个答案: