2017-06-14 126 views
1

我正在开发一个应用程序使用angularjs和JavaScript。在我的应用程序中,一个页面包含2个选项卡:名为'aboutme'和'portfolio'。两者都含有离子载玻片。幻灯片只在'aboutme'选项卡中工作,而不是'portfolio'中。这里是我的代码:离子幻灯片不工作

<div class="tab-inner-disc"> 
         <div class="block"> 
          <div class="br-menu-main"> 
           <div class="br-block {{clickOn}}"> 
            <ul> 
             <li> 
              <button ng-class="{'conn1': clickOn == 'conn1'}" class="disc_tab" ng-click="showCon('conn1')">About me  </button> 
             </li> 

             <li> 
              <button ng-class="{'conn2': clickOn == 'conn2'}" class="disc_tab " ng-click="showCon('conn2')"> Portfolio </button> 
             </li> 

            </ul> 

           </div> 
          </div> 


          <div ng-show="clickOn=='conn1'"> 
            <ion-slides options="options" slider="data.slider"> 
              <ion-slide-page> 
                <img src="img/add/2.png"> 
               </ion-slide-page> 
               <ion-slide-page> 
                <img src="img/add/3.png"> 
               </ion-slide-page> 
               <ion-slide-page> 
                <img src="img/add/6.png"> 
               </ion-slide-page> 
              </ion-slides> 
          </div> 

          <div ng-show="clickOn=='conn2'"> 
           <ion-slides options="options" slider="data.slider"> 
             <ion-slide-page> 
              <img src="img/add/2.png"> 
             </ion-slide-page> 
             <ion-slide-page> 
              <img src="img/add/3.png"> 
             </ion-slide-page> 
             <ion-slide-page> 
              <img src="img/add/6.png"> 
             </ion-slide-page> 
           </ion-slides> 

          </div> 
         </div> 
      </div> 


*my controller* 


    $scope.showCon = function(con) { 
     $scope.clickOn = con; 
    } 

    $scope.showCon('conn1'); 

    $scope.options = { 
     loop: false, 
     effect: 'slide', 
     speed: 500, 
     pagination:false, 
    } 
+0

如果我更换$ scope.showCon( 'conn1就');到$ scope.showCon('conn2');第二张幻灯片正在运行 – user7887448

+0

我认为最初加载的滑块完美工作,其他没有奏效。 – user7887448

回答

0

我控制器

$scope.showCon = function(con) { 
     $scope.clickOn = con; 
    } 

    $scope.clickOn = conn1; //add this code will be work 
    // $scope.showCon('conn1'); 

    $scope.options = { 
     loop: false, 
     effect: 'slide', 
     speed: 500, 
     pagination:false, 
    } 
+0

但第二个离子滑块不滑动。 – user7887448

+0

您可以在按钮单击时添加两个不同的功能,例如showCon1/showCon2 –

+0

,当我放置$ scope.clickOn ='conn2';第二张幻灯片正在运行,但第一张幻灯片无法运行 – user7887448