NgHide / ngShow using $ rootScope in a single page application

Question

Turning to you for help again for AngularJS. I am creating a SPA where my layout page (main page) is divided into three left navigation pane, central content, right pane of item list. My right list of items should be hidden when loading my home page, but should be visible on other screens. I created the $ rootScope variable in the homeController and set it to true based on the location path and using this variable in the template to set the ngHide value. When I go to another page, since I use SPA, my right and left bars will no longer be loaded, only my central content will make this new presentation. When I load a new view into a controller that sends data to a new view template, I return the $ rootScope variable that I created in homeController to "false", but my right panel is still not visible. I could see that the ng-hidden class is still included, although interpolation has updated the value to true. Any suggestions would be highly appreciated.

layout from the layout page:

<aside class="right_bar" ng-hide="{{$root.show}}"> <div class="my-list"><span class="f3">My Cart</span><div class=""><span class="list-count">0</span></div></div><div class="list-item"><ul></ul></div> </aside> 

homeController code:

  function getHomeConfigsCtrl($http, $location, $rootScope) { $rootScope.show = false; var loc = $location.path(); if (loc === '/Home/Index' || loc ==='') { $rootScope.show = true; } } 

Categories Controller Code: Here I return the value of the variable $ rootScope

 function getAllCategoryDetails($routeParams,$rootScope) { $rootScope.show = false; } 

Answer 1

Two things you need to know about angular for your code to work:

• You do not need to interpolate the values ​​with {{}} in ng directives, use ng-hide="showCart" .

• Assuming all your controllers are in the same angular application, all areas within the same application are inherited from the same root, what you define on $ rootScope will be accessible to all child areas. To access $ rootScope.x from any kind of application, all you have to do is {{x}} or in your case you use it inside the directive, you can do something like this:

  <aside class="right_bar" ng-hide="showCart">

  This will look for your current scope, if it has showCart, then it will use it, otherwise it will receive $ rootScope.showCart