Support concurrent navbars (navbar-absolute-top|bottom not correctly padded)

[minawalphonce]

I have 2 views each one of them have navbar-aboslute-top class, when I navigate the from the first one to the second the class has-navbar-top is removed from the rootElement, because the scope.$distroy of the first view is called after the call to the link function of navbar-aboslute-top is called.

[mcasimir]

Hi, can u explain a little bit more your use case? Some kind of code example would be perfect. Thanks

[minawalphonce]

I have 2 views each one is a top view with navbar-absolute-top

<div class="app init-screen">
    <div class="navbar navbar-app navbar-absolute-top">
        <div class="navbar-brand navbar-brand-center">

and

<div class="app login-screen">
    <div class="navbar navbar-app navbar-absolute-top visible-xs-block">
        <div class="navbar-brand navbar-brand-center">

my application starts with the init-screen, so the directive 'navbar-absolute-top' will add the class 'has-navbar-top' to the rootElemenet, and then the navbar will be stuck to the top and that's correct. but when I navigate to the new view using $state.go("login") - I'm using ui-router but it is the same for the ngRouter. a new view will be rendered with the another directive 'navbar-absolute-top' in turn it will try to add the same class 'has-navbar-top' to the rootElement but it is already exists so it ignores it. after finishing the render of the login screen, the $scope.distroy event of the init-screen view is called and it then remove the class 'has-navbar-top' from the rootElement. of the second view which in my case 'login-screen' and that cause a navbar-absolute-top exists but it is not stuck on top anymore

my fix is

angular.forEach(['top', 'bottom'], function (side) {
        var directiveName = 'navbarAbsolute' + side.charAt(0).toUpperCase() + side.slice(1) + "Directive";
        var count = 0;
       module.decorator(
            directiveName, ["$delegate", '$rootElement',
                function ($delegate: any[], $rootElement: ng.IRootElementService) {
                    var directive: ng.IDirective = $delegate[0];
                    directive.compile = function () {
                        return link;
                    }
                    function link(scope: ng.IScope) {
                        $rootElement.addClass('has-navbar-' + side);
                        count++;
                        scope.$on('$destroy', function () {
                            count--;
                            if (count == 0)
                                $rootElement.removeClass('has-navbar-' + side);
                        });
                    }

                    return $delegate;
                }]);
    }); 

I hope it may help.

[mcasimir]

Ok there is a moment where 2 views having navbar-top overlaps? Cause that's not covered atm. Your fix seems nice and generic, how do you feel about posting a PR :)?