簡體   English   中英

TypeError:fn不是angularjs中completeOutstandingRequest的函數

[英]TypeError: fn is not a function at completeOutstandingRequest in angularjs

我是剛接觸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,我遇到了這個錯誤。 經過一點分析,我認為是由於超時功能導致的。

誰能幫我解決這個問題? 提前致謝

嘗試

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM