[英]TypeError: fn is not a function at completeOutstandingRequest in angularjs
I am new to anugular js and working on simple module ie Image Slider. 我是刚接触js的新手,正在从事简单的模块,即Image Slider。
In this module, I have just change the image on home page. 在此模块中,我只是更改了主页上的图像。 Everything is working fine.
一切正常。 But now, I want to use some animation like when display next image then the previous image will be hide with fading effect.
但是现在,我想使用一些动画,例如在显示下一张图像时,上一张图像将被隐藏并具有渐变效果。
To use animation, I have used angular animate plugin. 为了使用动画,我使用了角动画插件。 When I include this plugin into m app, then browser show the error as given below:
当我将此插件包含在m app中时,浏览器显示如下错误:
TypeError: fn is not a function
at angular.js:16299
at completeOutstandingRequest (angular.js:4924)
at angular.js:5312
My custom Image sliding JS is: 我的自定义图像滑动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'
}
}); });
My Image Slider module html is: 我的图像滑块模块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>
I am using the above module in m home page: 我在m主页中使用上述模块:
<slider images="slider_images" />
With above code image slider is working fine without using Angular Animate plugin. 使用上述代码,图像滑块无需使用Angular Animate插件即可正常工作。 But with Angular Animate, I am getting this error.
但是使用Angular Animate,我遇到了这个错误。 After little analysis I think that it is happening because of timeout function.
经过一点分析,我认为是由于超时功能导致的。
Can anyone please help me on this issue? 谁能帮我解决这个问题? Thanks in Advance
提前致谢
Try 尝试
var sliderFunc = function() { timer = $timeout(function() { scope.next; timer = $timeout(sliderFunc, 5000); }, 5000); };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.