How to hide md-tab using style display none

Issue

I am using md-tabs in my project and I am adding custom directive to hide and show the tab. I have tried like this below

    <md-tabs md-dynamic-height md-border-bottom md-autoselect md-selected="quesCtrl.selectTab.activeMainTabIdx">
                    <md-tab label="question Add" ui-sref="questionsAdd">
                        <div ui-view class="marg-top30"></div>
                    </md-tab>
                    <md-tab label="upload Question" ui-sref="uploadQuestions">
                        <div ui-view class="marg-top30"></div>
                    </md-tab>
                    <md-tab label="My Questions" ui-sref="saved" ui-sref-opts="{reload: true, notify: true}">
                        <div ui-view class="marg-top30"></div>
                    </md-tab>
                    <div>
                        <md-tab has-permission="AUQUE" label="Author Questions" ui-sref="authorsubmitted" ui-sref-opts="{reload: true, notify: true}">
                            <div ui-view class="marg-top30"></div>
                        </md-tab>
                    </div>
                    
                </md-tabs>

and my directive is like

    (function () {

    'use strict';

    angular.module('iceOnGo.Admin')
           .directive('hasPermission', HasPermission);

    function HasPermission(rPermissionService) {
        return {
            link: function (scope, element, attrs) {
                if (!_.isString(attrs.hasPermission)) {
                    throw 'hasPermission value must be a string'
                }
                var value = attrs.hasPermission.trim();
                var notPermissionFlag = value[0] === '!';
                if (notPermissionFlag) {
                    value = value.slice(1).trim();
                }

                function toggleVisibilityBasedOnPermission() {
                    rPermissionService.HasPermissions(value).then(function (hasPermission) {
                 // if hasPermission is true then the element has to visible otherwise not

                    if (hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag) {
                        element[0].style.display = 'block';
                        
                    }
                    else {
                        element[0].style.display = 'none';
                        
                    }
                    });
                }

                toggleVisibilityBasedOnPermission();
                scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
            }
        };
    }

    HasPermission.$inject = [
        'iceOnGo.RolePermissionsService'
    ];

})();

md-tab element has style display none but it's not working. could any please tell me how to achieve this. Any help would be appreciated

Solution

Instead of targeting elements like that why don't you do it the angular way?

This means on the md-tab element add an ng-if or an ng-show something like this:

<md-tab ng-if="visible === true">
    <div ui-view class="marg-top30"></div>
</md-tab>

visible is a boolean flag you set in the directive based on your permission logic.

something like :

if (hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag) {
    visible = true;
} else {
    visible = false;
}

then you don't have to worry about setting any style. Note the difference between ng-if and ng-show. ng-if removes the element from the dom completely while ng-show applies the same method as what you are doing now, changes the style.display to none.

Example is untested, if you had provided a fiddle then I would have tried it. Hopefully you get the idea even if the code is not perfect.

Answered By - Andrei Dragotoniu