2

I have a Main controller for my app which is only responsible for showing and hiding the site header right now. However, it is not being shown again when I navigate back to the homepage (through a home link or back button). I have debugged and verified the scope variable is being set to true but the view is not reflecting this.

Here is the relevant code:

(index.html)

...
<body ng-app="mainApp" ng-controller="MainController">

<div class="container">
    <div class="top-header" ng-show='showHeader'>
...

(MainController.js)

app.controller('MainController', function($scope, $location) {

init();
$scope.click = function() {
  init();
} 

function init() {
    $scope.showHeader = false;
    if ($location.path() === "/") 
        $scope.showHeader = true;
}

$scope.$on('$routeChangeSuccess', function(next, current) { 
    init();
});

});

I'm sure this is something trivial I'm missing as I'm new to AngularJS but any help would be much appreciated.

user990423
  • 1,397
  • 2
  • 12
  • 32
Brian
  • 795
  • 1
  • 5
  • 7
  • What is your `$scope.click` function used for? It's setting `$scope.showHeader` to false, which could be contributing to your problem. – jperezov Dec 07 '15 at 20:39
  • Have you tried `ng-if` instead of `ng-show`? – Andre Kreienbring Dec 07 '15 at 20:41
  • Is the signature of the `$routeChangeSuccess` callback correct? [Here](http://stackoverflow.com/questions/24939006/angularjs-routechangesuccess-callback-arguments) it says there should come an `event` argument first. – Aldo Dec 07 '15 at 20:42
  • $scope.click was used for something before. I meant to remove it. It's is not causing the issue though. I have verified while debugging and just removed it. – Brian Dec 07 '15 at 21:16
  • @Aldo as far as I can tell the event param isn't required. It's not causing any errors and adding it doesn't change anything. – Brian Dec 07 '15 at 21:29
  • @Andre It works fine if I use ng-if instead and ng-show will only work if I remove the "top-header" css class from the div (which is strange as it's one line adding padding). – Brian Dec 08 '15 at 02:06

2 Answers2

0

You're saying when you browse back to the path is most likely not '/'. I expect it contains some name after it.

Change this code:

if ($location.path() === "/") 
        $scope.showHeader = true;

To this:

if ($location.path() === "/" || $location.path() === "/<name>") 
        $scope.showHeader = true;
Rodmentou
  • 1,610
  • 3
  • 21
  • 39
cesaraviles
  • 154
  • 1
  • 4
0

I would recommend to use ui-router

There you can determine if a certain state is active ($state.include)

But for me the code seems valid. debug the location path in the init function, there you can see what's going on

And be careful with binding primitives (showHeader)! Directives like ng-if creating a extra scope so double check that there is no ng-if around the ng-show

Anditthas
  • 531
  • 1
  • 3
  • 11
  • I was trying to avoid using ui-router at this point but I guess I might as well as the application is getting more complex. I did verify the init function is being called when clicking home and via the browsers back button and showHeader is being set to true. Changing ng-show to ng-if fixed the issue. Thank You. – Brian Dec 07 '15 at 21:35
  • 1
    Anditthas may have a point here. Try changing the primitive `showHeader` to an object, like `showHeader = {status: true}`, and manipulate the status instead, e.g. `$scope.showHeader.status = false;`. – Aldo Dec 07 '15 at 21:37
  • @Aldo I just tried making it an object instead and verified the status property is being set to true while debugging, but it did not work using ng-show. – Brian Dec 07 '15 at 21:50
  • Please console.log($path.location()) in the init function.. But strange that it worked with ng-if – Anditthas Dec 07 '15 at 21:53
  • @Anditthas it's logging "/" on the homepage, changing when switching views (to "/register" etc.), and back to "/" when returning home as expected. I have the flag switched back to a primitive right now but I verified again that it does not work using ng-show and only works using ng-if (whether I'm using an object or primitive). – Brian Dec 07 '15 at 22:04
  • Okay.. Really strange, can you reproduce it in a plunkr? – Anditthas Dec 07 '15 at 22:06
  • @Anditthas I was not able to recreate it in a plunkr but I noticed it works with ng-show when I remove the "top-header" class from the div locally. I have no idea why this could matter as it's just one line setting padding. It's a fairly large project already which I'm converting to an angular SPA so there must be some weird css stuff going on. Here's the plunkr I made in case anyone finds it useful: http://plnkr.co/edit/434Il0eWyOsmFEOjtKKC?p=preview – Brian Dec 08 '15 at 01:44