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元素的样式显示无，但它不起作用。请告诉我如何实现这一目标。任何帮助将不胜感激

Answer 1

而不是针对这样的元素，为什么不以角度方式进行？

这意味着在md-tab元素上添加ng-if或ng-show，如下所示：

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

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

类似的东西：

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

然后你不必担心设置任何风格。请注意ng-if和ng-show之间的差异。 ng-if完全从dom中删除元素，ng-show应用与您现在正在执行的方法相同的方法，将style.display更改为无。

示例未经测试，如果您提供了一个小提琴，那么我会尝试它。希望即使代码不完美也能得到这个想法。

Answer 2

尝试添加/删除 ng-hide css类

如果不起作用，请尝试使用此功能（您可以在此处查看正在运行的示例https://jsfiddle.net/llezcano/7vovqrj1/）

function hasPermission (RolePermissionsService) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var setVisible = function () {
        console.log("visible");
        element.removeClass('ng-hide');
      },
      setHidden = function () {
        console.log("hidden");
        element.addClass('ng-hide');
      },
      defineVisibility = function (reset) {
        if (reset) {
          setVisible();
        }
        RolePermissionsService.HasPermissions(authority)
        .then(function (result) {
          if (result) {
            setVisible();
          } else {
            setHidden();
          }
        });
      },
      authority = attrs.hasPermission.replace(/\s+/g, '');

      if (authority.length > 0) {
        defineVisibility(true);

        scope.$on('permissionsChanged', function() {
          defineVisibility(true);
        });
      }
    }
  }
}

我从jHipster生成器中取出has-authority并根据您的需要进行调整。

Answer 3

通过ng-disable和CSS display none的组合很容易。首先，向容器添加一个ID，例如BAR。

<div id="BAR"> ... </div>

然后将ng- disable添加到标签：

<md-tab ng-disable="visibleFlag" ...>

最后，添加以下CSS：

#BAR .md-tab.md-disabled {
  display: none;
}

如何使用样式显示无隐藏md-tab

3 个答案: