JSFiddle - React, Tailwind, and code Playground

by pdgreen

HTML

<html ng-app="mod">
    <head></head>
    <body>
        <div class="border" ng-controller="editCtrl">
            Controller: editCtrl <br/>
            <input type="text" ng-model="data.name" />
            <br/>
            <tabs>
                Directive: tabs <br/>
                <input type="text" ng-model="data.name"/>
            </tabs>
        </div>
    </body>
</html>
<div>

CSS

.border {
    border: 1px solid gray;
    margin: 8px;
    padding: 8px;
}

JavaScript

function editCtrl($scope) {
    $scope.data = {};
    $scope.data.name = "";
}

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

mod.directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true, 
      template:
        '<div class="border" ng-transclude></div>',
    };
  })