2016-09-26 14 views
0

私はanugular jsの新機能で、Image Sliderという単純なモジュールで作業しています。TypeError:fnはanglejsのcompleteOutstandingRequestの関数ではありません

このモジュールでは、ホームページの画像を変更しています。すべてがうまくいきます。しかし、今、私は次の画像を表示するときのようにいくつかのアニメーションを使いたい、そして、前の画像はフェード効果で隠れるでしょう。

アニメーションを使用するには、angle animateプラグインを使用しました。 Iは、m個のアプリにこのプラグインが含まれている場合、以下に与えられるように、ブラウザはエラーを示す:

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は次のとおりです。

私はMのホーム・ページで上記のモジュールを使用しています
<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> 

:上記のコードの画像スライダーで

<slider images="slider_images" /> 

角度アニメーションプラグインを使用せずに正常に動作しています。しかしAngular Animateでは、このエラーが発生しています。少しの分析の後、私はタイムアウト機能のために起こっていると思います。

誰でもこの問題についてお手伝いできますか?アドバンス

答えて

0

に感謝をしてみ

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

関連する問題