title: angularjs: howto access directive (text) value
body: <p>I want to write a directive that shows/hides the element based on the role I'm providing as a parameter (string value).</p>
  
  <p>I have the following directive: </p>
  
  <pre><code>(function() {
      'use strict';
  
      angular
          .module('fuse')
          .directive('showWhenRole', showWhenRoleDirective);
  
      /** @ngInject */
      function showWhenRoleDirective(auth) {
          return {
              restrict: 'A',
              scope: {
                  showWhenRole: '@'
              },
              compile: function(scope, tElement) {
                  console.log("showWhenRoleDirective",scope.showWhenRole);
                  // if (auth.isAdmin()) {
                  //     tElement.show();
                  // } else {
                  //     tElement.hide();
                  // }
              }
          };
      }
  })();
  </code></pre>
  
  <p>My HTML element looks as follows:</p>
  
  <pre><code>&lt;md-menu-bar id="user-menu" show-when-role="admin"&gt;
  </code></pre>
  
  <p>When I look in the console, the message is:</p>
  
  <pre><code>showWhenRoleDirective undefined
  </code></pre>
  
  <p>What am I doing wrong?</p>