无法在角度js控制器中调用插件功能
问题描述:
我正在使用http://idangero.us/swiper插件。第二张幻灯片中有一个按钮。点击该按钮后,滑块应该导航到下一张幻灯片。无法在角度js控制器中调用插件功能
我HTML文件
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2
<button ng-click="next()">Next</button>
</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="swiper.js"></script>
我控制器文件
app.controller('tutorialController', function($scope, $rootScope, $ionicPlatform, $state) {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true
});
$scope.next =function(){
swiper.slideNext();
}
});
当我点击下一步按钮,我得到如下错误:
TypeError: swiper.slideNext is not a function
at ChildScope.$scope.next (tutorialController.js:10)
at fn (eval at compile (ionic.bundle.js:27643), <anonymous>:4:203)
at ionic.bundle.js:65429
at ChildScope.$eval (ionic.bundle.js:30400)
at ChildScope.$apply (ionic.bundle.js:30500)
at HTMLAnchorElement.<anonymous> (ionic.bundle.js:65428)
at defaultHandlerWrapper (ionic.bundle.js:16792)
at HTMLAnchorElement.eventHandler (ionic.bundle.js:16780)
at triggerMouseEvent (ionic.bundle.js:2953)
at tapClick (ionic.bundle.js:2942)
请帮我解决这个错误。
答
<!-- Swiper -->
<html>
<head>
</head>
<body ng-app="monitor">
<div ng-controller="appController" >
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2
<button ng-click="next()">Next</button>
</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script>
var app = angular.module('monitor', []);
app.controller('appController', function ($scope) {
$scope.swiper = new Swiper('.swiper-container',{
pagination: '.swiper-pagination',
paginationClickable: true
});
\t
\t console.log('in1');
$scope.next = function() {
\t \t console.log('in2');
$scope.swiper.slideNext();
\t \t console.log('out');
}
});
</script>
</html>
+0
,正如预期的那样工作! :)即使使用var,而不是$ scope也能工作 – user1615664
你有没有在你的HTML中包含swiper js文件? – Rahul
是的,我已经包含了swiper.css和swipper.js文件。这个插件在普通的HTML文件中工作。当我在角度js控制器文件中使用时,swiper.slideNext()不起作用。 –
请检查https://github.com/ksachdeva/angular-swiper角度等效指令swiper.js – Rahul