Hide navigation bar with angularjs using ng-if

Question

SOLVED

Good Evening,

I'm having trouble with hiding navigation sidebar using ng-if from angular. I declare the activetab on $route but it still didn't work. Here's the code.

Html:

<header ng-if="$route.current.activetab !== 'login'">
<div class="col s3">
    <ul id="nav-mobile" class="side-nav fixed">
        <li class="logo">
            <a href="#" id="logo-container" class="brand-logo">BRAND LOGO</a>
        </li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>

$route config on app.js:

experimentApp.config(['$routeProvider', '$locationProvider', '$httpProvider',
function($routeProvider, $locationProvider, $httpProvider) {
    var baseTitle = 'Experiment';

    $routeProvider.when('/', {
        title: baseTitle + ' - Home',
        templateUrl: 'partials/home.php',
        activetab: 'home'
    }).when('/login', {
        title: baseTitle + ' - Login',
        templateUrl: 'partials/login.php',
        activetab: 'login',
        controller: 'LoginController'
    });

}]);

Answer :

i created new controller named navigation, partitioning the html and put some code on root controller.

Navigation Controller:

experimentApp.controller('navigation',
['$scope', '$location', '$route', function($scope, $location, $route) {
    $scope.navigation = function() {
        if (!$scope.active('/login')) {
            return 'partials/navigation.php';
        }
    }
}]);

$scope.active on root controller:

$scope.active = function(path) {
        return $location.path().match(new RegExp(path + '.*', 'i')) != null;
    }

HTML:

<header ng-controller="navigation" ng-include="navigation()"></header>

Thanks to anyone who helped.

Answer 1

Depending on how the routes change in your app, you should try using the events of the router. See: https://docs.angularjs.org/api/ngRoute/service/ $route

You can create a $scope variable, then change it when $routeChangeSuccess event occurs.

Answer 2

You can modify the scope from a $route by using the route's resolve attribute :

$routeProvider.when('/', {
    title: baseTitle + ' - Home',
    templateUrl: 'partials/home.php',
    resolve: { activetab: "home" }
}).when('/login', {
    title: baseTitle + ' - Login',
    templateUrl: 'partials/login.php',
    controller: 'LoginController',
    resolve: { activetab: "login" }
});

To use with the following ng-if: ng-if="activetab !== 'login'" .

There are multiple other solutions, such as using $location to monitor your page url, enriching the scope from a controller, listening to $route change events, etc.