Hidden Page and Nav Bar


#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!