Search code examples
htmlangularjsionic-v1

Slider content or view not changing based on menu click


I am new to Ionic and I am struck by this issue. My issue is if I select any menu from {{menu.menuName}} then it will slide to respective tab but this will happen only if I am in app/home other than this URL above condition will not work.Please help.

menu.html

<ion-side-menu side="left">
<ion-header-bar class="bar-balanced">
  <h1 class="title">App</h1>
</ion-header-bar>
<ion-content>
  <ion-list>
    <ion-item menu-close href="#/app/home">
      <i class="icon ion-home"></i> Home
    </ion-item>
    <ion-item menu-close ng-click="createDirectory()">
      <i class="icon ion-android-create"></i> Create Name
    </ion-item>
    <ion-list ng-controller="HomeCtrl">
         <div ng-repeat="menu in mainMenu ">
          <ion-item  class="item-stable"
                    ng-click="toggleGroup(menu)"
                    ng-class="{active: isGroupShown(menu)}" style="color:#11c1f3;">

            {{menu.menuName}} &nbsp; <i class="icon" style="position: absolute;
right: 8%;" ng-class="isGroupShown(menu) ? 'ion-minus' : 'ion-plus'"></i>
          </ion-item>

          <ion-item class="item-accordion"
                    ng-repeat="($index, directories) in directoryList"
                     ng-class="{'': $index === current}"
                     ng-click="changeSlide($index,directoryList)"
                    ng-show="isGroupShown(menu)" style="color:#E47006;" >
            {{directories.directoryName}}
          </ion-item>

        </div>
      </ion-list>
   </ion-list>
</ion-content>

Controller.js

$scope.changeSlide = function (index,directoryName)
 {
 console.log('Slide changed to ' + index);

 var data=  directoryName[index]
 if(data !=null){
 var directoryId =data.directoryId;
 data.dirId = directoryId;
 getImages();
 function getImages() {
   userService.getImages(data).then(function(response) {
       $scope.imageData = response;
       $scope.current = index;
       $ionicSlideBoxDelegate.slide(index);
   },function(error) {

   })
 }
 }
 $scope.ready.push(index + ': ' + true);
 };

app.js

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

.state('app.home',{
url:'/home',
cache:false,
views:{
  'menuContent':{
    templateUrl:'templates/home.html',
    controller:'HomeCtrl'
  }
}
})

.state('app.profileUpdate',{
url:'/profileUpdate',
cache:false,
views:{
  'menuContent':{
    templateUrl:'templates/profileUpdate.html',
    controller:'ProfileUpdate'
  }
}
});

$urlRouterProvider.otherwise('/app/home');
});

home.html

<ion-view  view-title="Home" hide-back-button="true" style="margin-top: 45px;">

  <ion-content  scroll="false" style="top:0px;" >

    <ion-slide-box slide-tabs-scrollable="true" show-pager="false" on-slide-changed="changeSlide(index,directoryList)" bounce="false" ion-slide-tabs>
      <ion-slide ng-repeat="(key, catg) in directoryList" ion-slide-tab-label="{{catg.directoryName}}" style="background-color:white;">
<br><br>

          <div class="row gallery">
             <div class="col col-33" ng-repeat="element in imageData" ng-click="showImages($index)">
             <img ng-src="data:image/jpeg;base64,{{element.imagePath}}" width="100%" />
             </div>
           </div>


          <center ng-if="!ready[key]">
            <br>
            <ion-spinner></ion-spinner>
          </center>

          <br></br><br></br><br></br>
      </ion-slide>
    </ion-slide-box>
  </ion-content>
</ion-view>

Solution

  • I have changed methods as mentioned below, I am adding this if in case anyone needs,

    fetchDirectories();
    
    function fetchDirectories(){
        userService.fetchDirectories()
            .then(function(response) {
              $scope.directoryList = response;
              $scope.lastView = $ionicHistory.backView() ;
              if($scope.lastView !=null){
              if($scope.lastView.stateName != 'app.home'){
                var indexNumber = sessionStorage.getItem("indexNumber");
                $scope.changeSlide(indexNumber,$scope.directoryList);
              }
              }else{
                $scope.changeSlide(0,$scope.directoryList);
              }
             window.dispatchEvent(new Event('resize'));
              },
            function(errResponse){
            }
        );
    };
    

    $scope.changeSlide

    $scope.changeSlide = function (index,directoryName)
    {
    console.log('Slide changed to ' + index);
    if($location.path() == '/app/home'){                                                                                   
    console.log($location.path());
    var data=  directoryName[index]
    if(data !=null){
     var directoryId =data.directoryId;
     data.dirId = directoryId;
     getImages();
     function getImages() {
       userService.getImages(data).then(function(response) {
           $scope.imageData = response;
           $scope.current = index;
           $ionicSlideBoxDelegate.slide(index);
          },function(error) {
    
       })
     }
     }
     $scope.ready.push(index + ': ' + true);
     }
     else if($location.path() != '/app/home'){
     sessionStorage.setItem("indexNumber",index);
      $state.go('app.home');
     }
     }