Ionic side menu bar not hide properly

Question

I have a ion menu which contain 2 links , Dashboard, favorite.

At the very first time Dashboard page is loaded for application with content. Now when i switch to another menu item. My Content seems populated first after that side menu hides. This causes user experience using the app is bad.

Can we hide side menu first then populated content.

I also tried following steps

   <ion-list>
            <ion-item menu-close href="#/app/articles" ng-click="toggleLeft()">
              Dashboard
            </ion-item>
            <ion-item menu-close href="#/app/favourite" ng-click="toggleLeft()">
              Favorite
            </ion-item>

          </ion-list>

and

   $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };

which also doesn't make any effect .

Here is my Dashboard page:-

    <ion-view>
  <ion-content>

            <ion-list can-swipe="true">
            <ion-item class="list article-list" ng-repeat="article in articles">
               my divs
            </ion-item>
            </ion-list>

  </ion-content>

</ion-view>

and controller is :

.controller('ArticleCtrl', function($scope, $rootScope ,articleService) {
  //This is fetching data from database  (**Sql lite**)
articleService.fetchArticles().then(function(articles){


                $rootScope.articles = articles;

}                 
});

Similar code for Favorite with different controller.

Any suggestions?

Thanks

icyKira icyKira · Accepted Answer · 2015-08-25T20:44:09

This is actually default behaviour but it can be changed. Ionic offers a few events that can be watched and you can than control when to do something. In your case I would populate the $scope only after the view fully enters the screen.

$scope.$on('$ionicView.enter', function (viewInfo, state) {
    $scope.data = _getData();
});

So basically the data that you are filling the view with needs to be associated with the $scope only when the view is fully visible.

Edit:

.controller('ArticleCtrl', function($scope, $rootScope ,articleService) {
  //This is fetching data from database  (**Sql lite**)

var _articles;
articleService.fetchArticles().then(function(articles){
    _articles = articles;
}

$scope.$on('$ionicView.enter', function (viewInfo, state) {
        $scope.articles = _articles;
});  
});

Ionic side menu bar not hide properly

1 Answers