角度jsコントローラのプラグイン機能を呼び出せません

私はhttp://idangero.us/swiperプラグインを使用しています。私は2番目のスライドにボタンがあります。そのボタンをクリックすると、スライダーが移動して次のスライドに移動します。角度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（）は機能しません。 –

swiper.jsの等価指令にhttps://github.com/ksachdeva/angular-swiperをご確認ください – Rahul

プラグインのコードは、angleディレクティブで囲む必要があります。は、目的の機能

を実装するには、以下のリンクを参照してください、角度の方法で

出典

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>

をあなたのアプリケーションでswiper.jsを統合するためのリンクの上ご覧ください

出典

2017-08-04 08:36:39 user1615664

が似たようなパターンでいくつかのJavaスクリプトライブラリを使用しました。 :) $ scopeの代わりにvarを使っても動作します – user1615664

角度jsコントローラのプラグイン機能を呼び出せません

答えて

関連する問題