title: Giving a directive a custom attribute.
body: <h2>Directive</h2>
  
  <pre><code>function CreateTable() {
      var directive = {
          restrict: 'E',
          scope: {
              pageName: '=',
          },
          templateUrl: 'Hexdra/partials' + pageName + '-table.html',
      };
      return directive;
  };
  </code></pre>
  
  <h2>The Template Html</h2>
  
  <pre><code>  &lt;table ng- controller="TableController as TblCtrl"&gt;
      &lt;tr ng-repeat-start="data in TblCtrl.table" ng-if="$first"&gt;
       &lt;th&gt;{{::data.col1}}&lt;/th&gt;
       &lt;th&gt;{{::data.col2}}&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat-end&gt;
      &lt;td&gt;{{data.col1}}&lt;/td&gt;
      &lt;td&gt;&lt;input disabled type="checkbox" ng-checked="data.col2" ng- model="checkbox"/&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <h2>The Html</h2>
  
  <pre><code>&lt;site-table pageName="goals" class="span6"&gt;&lt;/site-table&gt;
  </code></pre>
  
  <p>When beginning to make tables for my website, I found myself making a new directive for every table around the site, even though thats only 4 seperate directives, I know that there has to be a way to make a general-directive that I can then add, something, to make it so that the directive will load both a unique templateUrl and also a unique JSON file that is used to populate the table with data that is unique to each individual table. </p>
  
  <p>I went <a href="https://docs.angularjs.org/api/ng/service/$compile#-link-" rel="nofollow">looking</a> and found that you can <a href="https://docs.angularjs.org/guide/directive#" rel="nofollow">create your own attributes</a> in the html, as shown in section The Html above. In this case i added a new attribute, <code>pageName</code>. In the example it is <code>"goals"</code>. Im trying to get my <code>&lt;site-table&gt;</code> directive to assign that attribute to the scope of the Directive, where it will then complete and evaluate <code>templateUrl</code> as <code>Hexdra/partials/goals-table.html</code> </p>
  
  <p>Currently though I am left with a blank page and a error in the console that <code>pageName is undefined</code>. </p>
  
  <p>I feel like I am missing something very important that happens between when a directive is called and when it is finished. Perhaps this is a good time to get into ng-Route? </p>
  
  <p>Thank you for looking :)</p>