无法在角度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)

请帮我解决这个错误。

来源

2017-08-04 Harish_S

你有没有在你的HTML中包含swiper js文件？ – Rahul

是的，我已经包含了swiper.css和swipper.js文件。这个插件在普通的HTML文件中工作。当我在角度js控制器文件中使用时，swiper.slideNext（）不起作用。 –

请检查https://github.com/ksachdeva/angular-swiper角度等效指令swiper.js – Rahul

您应该将插件代码封装在角度指令中。请参考以下链接，以实现所需的功能

请参考上面链接到你的应用swiper.js整合角度的方式

来源

2017-08-04 07:44:49 Rahul

 <!-- 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>

来源

2017-08-04 08:36:39 user1615664

，正如预期的那样工作！ :)即使使用var，而不是$ scope也能工作 – user1615664

无法在角度js控制器中调用插件功能

回答

相关问题