Question

我正在使用http://idangero.us/swiper插件。我在第二张幻灯片中有一个按钮。单击该按钮后，滑块应导航到下一张幻灯片。

我的 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)

请帮我解决此错误。

Answer 1

您应该将插件代码包装在angular指令中。请参阅以下链接以实现所需的功能

请参考以上链接，以角度方式将swiper.js集成到您的应用程序中

Answer 2

     <!-- 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

    });
	
	console.log('in1');

    $scope.next = function() {
		console.log('in2');
        $scope.swiper.slideNext();
		console.log('out');
    }

});

</script>

</html>

无法在角度js控制器

2 个答案: