スタイル表示を使用して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要素にはスタイル表示がありませんが、機能しません。どのようにこれを達成するか教えてください。どんな助けがありがたいですか？

Answer 1

のような要素をターゲットにするのではなく、どうやって角を作ってみませんか？

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

見えるが、あなたはあなたの許可ロジックに基づいてディレクティブで設定ブールフラグです：

これは、このようなNG-IFまたはNG-ショー何かを追加MD-tab要素に意味しています。以下のような

何か：

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

       } 
       else { 
        visible = false;; 

       } 
       }); 

は、あなたが任意のスタイルを設定することを心配する必要はありません。 ng-ifとng-showの違いに注意してください。 ng-ifが現在行っているのと同じメソッドを適用している間、ng-ifがdomから要素を完全に削除し、style.displayをnoneに変更します。

例はテストされていません。あなたがフィドルを提供していたら、私はそれを試してみました。コードが完璧でない場合でもアイデアを得ることを望みます。 ngの非表示 CSSクラス

動作しない場合は、これを試してくださいを追加/削除することにより

Answer 2

てみてください、私はhas-authorityを取っ

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); 
     }); 
     } 
    } 
    } 
} 

（あなたはここでhttps://jsfiddle.net/llezcano/7vovqrj1/を実行中のサンプルを見ることができます） jHipsterジェネレータから、あなたのニーズに適応させました。