JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<select name="myTables" id="myTables" ng-model="mytable">
  <option value="table1">table1</option>
  <option value="table2">table2</option>
  <option value="table3">table3</option>
  <option value="table4">table4</option>
</select>

<!-- this is my desired output: <joe-grid viewedtable="{{mytable}}"></joe-grid> -->
<joe-grid></joe-grid>

JavaScript

var app = angular.module('app', []);

app.directive('joeGrid', function($compile) {
  return {
    restrict: 'E',
    template: '<h1>Hi there, it is me: {{adjective}} {{tPlace}}</h1>',
    compile: function(tElem, attrs) {
      tElem.attr('viewedtable', '{{mytable}}');
      return function(scope, elem, attrs) {
          console.log(elem.attr('viewedtable'));
      }
    }, 
    scope: {
      adjective: '='
    },
    link: function(scope, element, attrs) {
      scope.$watch(function(scope, element, attrs) {
        console.log(scope.adjective);
        console.log('what table you are using? ' + scope.adjective);
        if (scope.adjective === "table1") {
          scope.tPlace = 'Texas';
        } else {
          scope.tPlace = 'No Place';
        }
        return scope.adjective;

      })
    }
  }
});

angular.element(document).ready(function() {
  angular.bootstrap(document, ["app"])
});