無法在角度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控制器中調用插件功能

回答

相關問題