滑块内容或视图不会因菜单点击而改变

时间:2017-12-13 09:47:14

标签: html angularjs ionic-v1

我是Ionic的新手,我对此问题感到震惊。 我的问题是,如果我从{{menu.menuName}}选择任何菜单,那么它会滑动到相应的标签,但只有当我在app/home以外的情况下才会发生这种情况。上述情况不起作用。请帮助。

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>

1 个答案:

答案 0 :(得分:0)

我已经更改了下面提到的方法,如果有人需要,我会添加这个,

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');
 }
 }