JSFiddle - React, Tailwind, and code Playground

by nicholasstephan

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div ng-app="drawers">
    <div drawer>
        <button ng-click="open()">open drawer</button>
        <div class="drawer-container">
            <div drawer>
                <button ng-click="closeParent()">close parent drawer</button>
                <p>a drawer</p>
                <button ng-click="open()">open another drawer</button>
                <div class="drawer-container">
                    <p>second drawer</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.drawer-container {
    display:none;
}

JavaScript

angular.module('drawers', [])
.directive('drawer', function() {
    return {
        scope:true,
        controller: function($scope, $element) {
            this.open = function() {
                $('>.drawer-container', $element).show();
            };
            this.close = function() {
                $('>.drawer-container', $element).hide();
            };
        },
        require: ["drawer", "^?drawer"],
        link: function(scope, element, attrs, ctrls) {
            var thisDrawer = ctrls[0];
            var parentDrawer = ctrls[1];
        
            scope.open = thisDrawer.open;
            scope.close = thisDrawer.close;
            scope.closeParent = parentDrawer.close;
        }
    }
})