私は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では、このエラーが発生しています。少しの分析の後、私はタイムアウト機能のために起こっていると思います。
誰でもこの問題についてお手伝いできますか?アドバンス