Hidden Page and Nav Bar

ionic-v1
1

I use the latest version of ionic. I followed this http://plnkr.co/edit/B7jwsyz5WhufGs3G3zaX?p=preview and the home and about pages are not showing. The css showing it invisibility:hidden in ionic.css:5787. It driving me crazy.

2

Do you have it in a Plunker or Codepen as well so we can check?

3

it works fine in android emulator. i just wanted to edited in plain html with chrome without using localhost or emulator. wasn’t a smart move because of compatibility issues. don’t worry about it. thanks for the respond. you guys are awesome. i am excited getting this app done. i hope you guys updates the docs/tutorials on the website because sometimes it can be confusing because they are many ways of doing the same thing.

4

I have the same issue here but I am using localhost (python -m SimpleHTTPServer). The header ‘ion-nav-bar’ has the ‘hidden’ css-class thus the header is hidden :confused: I have no idea how can I solve it? Any ideas or tips?

5

Ok, my mistake, sry. The “index” page was an abstract state.

6

can you post a screenshot of fixed abstract state.

7

I had the following exemplary state-provider config:

$stateProvider.state('tab', {
    url:         '/tab',
    abstract:    true,
    templateUrl: 'templates/tabs.html'
})
.state('tab.View', {
    url:   '/view',
    views: {
        'view-tab': {
            templateUrl: 'templates/view.html',
            controller:  'ViewController'
        }
    }
});

So, i was always requesting the #/view url instead of #/tab/view.

8

instead of tab. i got ng-click=“goTo(‘home’)”. i would you solve this?

.config([’$stateProvider’, ‘$urlRouterProvider’,
function($stateProvider, $urlRouterProvider) {

$stateProvider
  .state('home', {
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeController'
  });

$urlRouterProvider.otherwise('/home');

}
])

.controller(‘MainCtrl’, [’$scope’, ‘$location’,
function($scope, $location) {

console.log('MainCtrl');

$scope.goTo = function(page) {
  console.log('Going to ' + page);
  $scope.sideMenuController.toggleLeft();
  $location.url('/' + page);
};

}
])

.controller(‘HomeController’, [’$scope’, ‘$location’, ‘$timeout’,
function($scope, $location, $timeout) {

console.log('HomeController');

$scope.navTitle = 'Fun';

$scope.leftButtons = [{
  type: 'button-icon icon ion-navicon-round',
  tap: function(e) {
    $scope.sideMenuController.toggleLeft();
  }
}];

$scope.rightButtons = [{
  type: 'button-icon icon ion-plus-round',
  tap: function(e) {
    $scope.sideMenuController.toggleRight();
  }
}];

$scope.simulateRefresh = function() {
  $timeout( function() {
    $scope.$broadcast('scroll.refreshComplete');
  }, 5000);
};

}
]);

9

Instead of $location.url('/' + page); try to use the “state ids”. My “go2”-Method:

$scope.go2 = function go2(stateId) {
    if (stateId === 'exit') {
        ionic.Platform.exitApp();
    }

    $scope.currentState = stateId;
    $state.go(stateId);
};

Note: $state is an injected controller param.

So, and instead of the url I’m using the “state id”, in your case home:

<a ng-click="go2('home')">Go home :)</a>

Thats it.

10

does this solve the abstract state?

11

It does not solve the abstract state it just takes care the url is correct. In case of an abstract state you need the complete url: #/{ABSTRACT_URL}/{VIEW_URL}.

12

It works. Thank You!