1

I'm trying to show and hide a div using ng-show. It's a navbar that I want to show only in some views.

I have a controller which "controls" that div. And in other controller I want to edit this ng-show value in order to hide or show the div (navbar).

I tried different things as using a $rootScope, a timeout, an $apply, a factory... but nothing works.

So I'm asking here if anyone could help me.

(Sorry for my English)

This is my html and js codes (last edit code)

<div id="main">
    <!-- Aquí inyectamos las vistas  -->
        <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 para profesorado y alumnos de la universidad
                    </p>
                </div>
            </div>
        </div>
    <div ui-view></div>
    </div>

I tried a (ng-show="isLogged==false") too.

The controller of the div:

.controller('appCtrl', function($scope, $rootScope) {
        console.log($scope.isLogged); //---> this shows undefined
    });

The controller where I want to edit the isLogged value:

cities2.controller('userCtrl',['rootScope', '$scope', '$state','$http','md5', function($rootScope, $scope, $state, $http, md5) {
    $rootScope.$apply(function(){
        $rootScope.isLogged = true;
    });

Thanks for the help!

Frank van Wijk
  • 3,234
  • 20
  • 41
Manel Mendez
  • 87
  • 1
  • 8
  • where are u initializing the isLogged variable , ? – Shushanth Pallegar Apr 20 '16 at 09:59
  • I believe the $scope doesn't get carried across different controllers? So you need to initialize the isLogged variable in the appCtrl controller? – Olly Apr 20 '16 at 10:00
  • I tried a $scope.isLogged=false in the appCtrl before, that is what you mean as initialize? – Manel Mendez Apr 20 '16 at 10:03
  • according to your view the controller appCtrl doesnt have children controllers hence the scope doesn't inherit to your views , hence u can set $rootScope.isLogged = true/false based on your requirement and make it false/true in your views controllers , no need of any $digest,$apply or $timeout , because Angular knows about the changes as it is attached to $scope/$rootScope – Shushanth Pallegar Apr 20 '16 at 10:07
  • so using only $rootScope should work? I tried it before too but didn't work – Manel Mendez Apr 20 '16 at 10:13
  • you have use the $rootScope in your views too , if its not working could you please create plunker or fiidle for it – Shushanth Pallegar Apr 20 '16 at 10:14
  • I used the $rootScope.isLogged = true in the 'userCtrl' but it doesn't change the isLogged value (i've never use plunker or fiidle, i'm going to look how to do it) – Manel Mendez Apr 20 '16 at 10:20

3 Answers3

0

It's good practice to use services to share data between controllers.

cities2.controller('appCtrl', ['$scope', 'LoggedStatus', function($scope,LoggedStatus) {
    $scope.LoggedStatus = LoggedStatus;
}]);

cities2.controller('userCtrl', ['$scope', 'LoggedStatus', function($scope,LoggedStatus) {
    $scope.LoggedStatus = LoggedStatus;
}]);

cities2.service('LoggedStatus', function() {
  return {
    isLogged: false
  }
});

Changing the value of $scope.LoggedStatus.isLogged in either controller will change the value in both.

hmichaels
  • 31
  • 2
0

In your appCtrl controller, do $scope.isLogged=0. If you change this value to 1, the block will be visible else it will be hidden.

app.controller('appCtrl', function($scope) {
  $scope.isLogged=0;
})

Refer to the plunker below:

https://plnkr.co/edit/d3q3QwA9k5f6ewXbqZ3M?p=preview

alyson_216
  • 136
  • 14
  • I've put that in the appCtrl and $scope.isLogged=1 in the userCtrl but its the same problem as if I put false and true. It's like the isLogged value was always false, doesn't update the new value. – Manel Mendez Apr 20 '16 at 10:32
  • in the userCtrl I want to put a true value in isLogged to show the div of the ng-show – Manel Mendez Apr 20 '16 at 10:51
  • You want to interact with both the controllers (with true and false value) and show the result in the DOM? – alyson_216 Apr 20 '16 at 13:09
  • Exactly, that's it – Manel Mendez Apr 20 '16 at 13:20
  • You can use factory to set the value to true and false and fetch it through a single controller and show it into the DOM. Because DOM can fetch you result from one single controller for a particular block. – alyson_216 Apr 23 '16 at 09:03
  • Thank you, but I dont know how to use factory... Do you know any example? – Manel Mendez Apr 23 '16 at 17:46
0

Well, finally I found the solution. I put this if can help someone:

I put a .run in the appCtrl where I initialize the ng-show:

.run(function ($rootScope) {
        $rootScope.isLogged = false;
    });

and now, when I put a true value in the other controller it works, and the navbar appears.

cities2.controller('userCtrl',['$rootScope', '$scope', '$state','$http','md5','$sessionStorage',  function($rootScope, $scope, $state, $http, md5, $sessionStorage) {
    $rootScope.isLogged=true;
  }]);
Manel Mendez
  • 87
  • 1
  • 8