I am attempting to toggle the visibility of a div using ng-show. Specifically, I have a navbar that should only be displayed in certain views.
I have one controller managing the behavior of this div, and another controller where I want to manipulate the value of ng-show to show or hide the navbar.
I've experimented with various approaches such as using $rootScope, timeouts, $apply, factories, but so far nothing has been successful.
Any assistance would be greatly appreciated.
(Apologies for any language errors)
Below are snippets of my HTML and JS code:
<div id="main">
<!-- Injecting views here -->
<div ng-controller="appCtrl" ng-show="isLogged" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#/">Aula Virtual</a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="text-align: right">
<li class="active"><a href="#/home">Home</a></li>
<li><a href="#/server">Users</a></li>
<li><a href="#/operaciones">Operaciones</a></li>
<li><a href="#/about">About</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</div>
</div>
<div class="connect">
<div class="container">
<p>
Aula Virtual for university professors and students
</p>
</div>
</div>
</div>
<div ui-view></div>
</div>
I also attempted using (ng-show="isLogged==false").
The controller for the div:
.controller('appCtrl', function($scope, $rootScope) {
console.log($scope.isLogged); // displays undefined
});
The controller where I aim to modify the isLogged value:
cities2.controller('userCtrl',['rootScope', '$scope', '$state','$http','md5', function($rootScope, $scope, $state, $http, md5) {
$rootScope.$apply(function(){
$rootScope.isLogged = true;
});
Thank you for your assistance!