JSFiddle - React, Tailwind, and code Playground

by Aaron Zhang

HTML

<div ng-app="myApp">
    <div ng-controller="myController">
        <div modal show-on="foo" data="'abcdefg'"></div>
        <div modal show-on="bar" data="'bcdefgh'"></div>
        <button ng-click="foo = !foo">Toggle Foo</button>
        <button ng-click="bar = !bar">Toggle Bar</button>
    </div>
</div>

JavaScript

(function () {
    'use strict';
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.foo = true;
        $scope.bar = false;
    });
    app.directive('modal', function () {
        return {
            scope: {
                showOn: '=',
                data:'='
            },
            template: '<div ng-show="showOn">{{ data }}</div>'
        }
    });
})();