GEOFFREY MWANGI GEOFFREY MWANGI - 5 months ago 68
AngularJS Question

Implementing a navbar nested view in angular ui router

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

Answer

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>
Comments