angularjs - 如何使用 display none 样式隐藏 md-tab

Question

我在我的项目中使用 md-tabs，我正在添加自定义指令来隐藏和显示选项卡。我在下面这样尝试过

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

我的指令是这样的

    (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 元素有样式 display none 但它不工作。任何人都可以告诉我如何实现这一目标。任何帮助将不胜感激

Answer 1

为什么不以 Angular 方式来定位元素呢？

这意味着在 md-tab 元素上添加一个 ng-if 或 ng-show 像这样:

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

visible 是您根据权限逻辑在指令中设置的 bool 标志。

类似的东西:

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

那么你就不用担心设置任何样式了。请注意 ng-if 和 ng-show 之间的区别。 ng-if 完全从 dom 中删除元素，而 ng-show 应用与您现在正在做的相同的方法，更改 style.display 没有。

示例未经测试，如果您提供了一个 fiddle ，那么我会试一试。希望即使代码不完美，您也能理解。