@appyapp wrote:
Hi all the Ionic's community,
I'm a beginner with Ionic Framework (a couple of weeks) and I'm facing a little issue. Let me explain.
I started to build an app from the starter tabs app. So I almost have the same structure. The difference resides in my home.html, I have links to a state that use a different set of tabs (it's defined as a second abstract mode).The thing is, doing that way, there is no navigation back button. So, I'm trying to create a button in the header bar that will be shown on the second set of pages.
A little bit of code to be more clear !index.html
<body ng-app="starter"> <!-- Header of the page--> <!-- The nav bar that will be updated as we navigate between views. --> <ion-nav-bar class="bar-stable" align-title="center"> <ion-nav-back-button> </ion-nav-back-button> <ion-nav-buttons side="left"> <button class="button ion-arrow-left-a" ng-controller="FromGuideToHome" ng-if="$root.GuideActivated" ng-click="ReturnHome()">Back</button> </ion-nav-buttons> <ion-nav-buttons side="right"> <button class="button">Logo</button> </ion-nav-buttons> </ion-nav-bar> <ion-nav-view></ion-nav-view> </body>As you can see, I put a controller in my button to proceed the ReturnHome() function and a ng-if condition to control if the button should be shown or not. Maybe, it will not be the only button I'd like to add; that's why I used ng-if and not ng-show.
Home Controller:
.controller('HomeCtrl', function ($scope, $stateParams,allGuides) { //console.log($stateParams); $scope.$root.GuideActivated = false; console.log($scope.$root.GuideActivated); $scope.guides = allGuides; })The Home controller assigned the false value at the boolean: the button is not visible. That's the correct behaviour.
Now, let's see the Guide Controller, which is the controller I access after clicking in one of the link in the homepage.
Guide Controller:
.controller('GuideCtrl', function ($scope,$stateParams,getGuides) { $scope.$root.GuideActivated = true; console.log($scope.$root.GuideActivated); $scope.guide = getGuides.get($stateParams.ShortName); })The controller assigned a true value at the button, so we can click on the button (correct behaviour).
The controller of the button is the next one:
.controller('FromGuideToHome', function ($scope,$state,$stateParams) { console.log($stateParams.ShortName); $scope.ReturnHome = function () { $scope.$root.GuideActivated = false; console.log($scope.$root.GuideActivated); $state.go('tab.home'); }; })It redirects the user in the homepage (tab.home state) and at the same time, it turns off the button.
My issue is this one:
Firstly, from the Homepage, I click to go on the second page (Guide homepage): button appeared on the guide homepage
Then, I click on the button, I return on the homepage of my app : button is off
When I click one more time on the same link: in the guide homepage the button is off, I can't see it.It seems that the assignation $scope.$root.GuideActivated = true; is not treated. Or the controller GuideCtrl is not triggered the second time.
I did a codepen to explain my issue :
http://codepen.io/appyapp/pen/dYJBdRSorry for the long post
Posts: 4
Participants: 2