Hi guys. I’ve been trying out Ionic for a couple of weeks now, and just cant figure out how to refresh a concrete html template (the header with menu one).
Im playing with this CodePen which was created for this question.
My idea is to add a login page before getting to the tabs/menu part of the app, so I added it. In the login page I dont want the tabs or the menu to show, so I went “/login” and set the ng-show property for the ion-nav-bar inside the menus to a variable I have in NavCtrl ($scope.logged or {{logged}} in the html).
I also set the login page to be the default one. That part works, since the header does not show when Im in the login page. But then I click login and go to /tab/home and the header still doesnt show.
I tried two things in this CodePen that “extends” the previous one i pasted http://codepen.io/anon/pen/ojKXKy?editors=101.
- Setting the NavCtrl to control the loginPage. Adding a $scope.setLogged to this controller that changes the logged variable to the value I pass it, and calling that on the ng-click=“setLogged(true)” of the login button.
- Creating a listener $scope.$on(‘changeLogged’, function(event, args) in the NavCtrl that also changes the logged property, and calling it from HomeCtrl like this: $scope.$emit(‘changeLogged’,true);, that way when I get to the Home page and the HomeCtrl is created, the logged property of the NavCtrl changes.
Both methods have console.log inside to show how the code gets called correctly, but the Header keeps not showing. The thing is I guess this is not an appropriate thing to do for some reason (Im quite sure the one with ng-click is an awful solution, I’m just trying anything at this point). But i cant find a good clear place where this is done or explained.
So the question, with all this in mind would be, how should I handle a header with side menu so it only shows when a user is logged??
Maybe just completely separate both parts of the app somehow?? In case this is the correct alternative, how would you do it? Some docs/article would be cool.
Thanks in advance.
UPDATE 1
I found two ways of doing it (poorly, only for tests i suppose).
1- The default sidemenu app for ionic has a Login page which is a ion-modal-view. That way, I can set a different header if I want to, or in my case, remove it.
2- If i set the z-index to 1000 in Login ion-view, the header gets hidden behind it and it doesn’t show.
They’re both bad practices I guess, but until I find out the correct way to do it…
If i get closer I’ll update.