Implementing a navbar nested view in angular ui router

Question

Am new to the angular js. Am implementing a nested ui view but the problem is when checking the current state of a page it returns many objects such that i cant use $state.current to set the ng-show

I would like the navbar shown and hidden in some states.

I have tried

The main index.html page
<html>......
<body ng-app="myapp">
<nav ng-controller="headerCtrl" ng-show="shownav()" >
  //here is the navbar code..The shownav is defined on the headerCtrl

</nav>

<div ui-view>   </div>

//Angular js, controllers and services links


</body>
</html>

The app.js code

var app = angular.module('myApp', ['ui.router']);
app.controller('headerCtrl',function($scope, $state) {
    $scope.shownavbar = function(){
        var state = $state.current;
       if(state ==='login' ){
       return false;
       }else{
       return true;
   }         
}
 app.config(function($stateProvider, $urlRouterProvider, $httpProvider){

 $stateProvider
.state('login', {
    url:'/login',
    templateUrl: 'templates/index/login/login.html',
    controller: 'loginCtrl'
 })

.state('dash', {
    url: '/dash',
    templateUrl:'templates/layout/dashboard.html',
    abstract:true
})

.state('dash.call',{
    url: '/call',
    templateUrl: 'templates/index/calls/calls.html',
    controller: 'callCtrl'
})

 .state('dash.profile', {
 url: '/profile',
 templateUrl: 'templates/index/account/profile/profile.html',
 controller: 'profileCtrl'

 })


});

I would like the navbar hidden for some states like when a user is on the login state

At the headerctrl i have also tried

 $scope.shownavbar = function(){
        var state = $state.current;
        $log.info(state);

  }

This returns in the console:

angular.js:13708 Object {name: "", url: "^", views: null, abstract: true}
angular.js:13708 Object {name: "", url: "^", views: null, abstract: true}
angular.js:13708 Object {url: "/login", templateUrl:  "templates/index/login/login.html", controller: "loginCtrl", name: "login"}
angular.js:13708 Object {url: "/login", templateUrl: "templates/index/login/login.html", controller: "loginCtrl", name: "login"}
 angular.js:13708 Object {url: "/login", templateUrl: "templates/index/login/login.html", controller: "loginCtrl", name: "login"}

WHAT COULD BE THE PROBLEM

maybe you can use a `$rootScope` to save true or false, and in the path of `run()` use a function that see when the state is changing and hide it. — Paulo Galdo Sandoval, Jun 25 '16 at 03:13

Paulo Galdo Sandoval · Accepted Answer · 2016-06-25T06:58:43.000

I can think in two ways to solve this.

First solution EDITED

inside your run() put a function to see when the state is changing and hide or show the navbar.

myApp.run(function ($rootScope, $state) {
    $rootScope.navbar = false;
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        if (toState.name === 'login') {//toState variable see the state you're going 
            $rootScope.navbar = false;
        } else {
            $rootScope.navbar = true;
        }
    });
});

and change in your ng-show="navbar"

Second solution

the second solution i can think is you use multiple views.

$stateProvider
    .state('login', {
        url: '/',
        views: {
            'navbar': {
                templateUrl: null,
                controller: null
            },
            'body': {
                templateUrl: "views/login.html",
                controller: 'LoginController'
            }
        }
    })
    .state('home', {
        url: '/home',
        views: {
            'navbar': {
                templateUrl: "views/navbar.html",
                controller: null
            },
            'body': {
                templateUrl: "views/inicio.html",
                controller: null
            }
        }
    });

and in your html views put something similar to this:

<div ui-view="navbar"></div>
<div ui-view="body"></div>

The first solution is the best but doesnt work... After trying console.log($state.current) in the $rootScope.$on('stateChangeStart..... ) block it returns null but console.log($state) returns something... — Geoff, Jun 25 '16 at 06:16
i'm so sorry i've tested it and it have a fews changes, please see my update — Paulo Galdo Sandoval, Jun 25 '16 at 06:57
Now it works thanks.. Could you also add on how to handle the check of state using switch statement instead of if(..) else... — Geoff, Jun 25 '16 at 07:06
you can use it as same as a numer, please check this. http://stackoverflow.com/questions/2896626/switch-statement-for-string-matching-in-javascript — Paulo Galdo Sandoval, Jun 25 '16 at 07:11

Implementing a navbar nested view in angular ui router

1 Answers1