JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <script type="text/ng-template" id="templates/datepicker/datepicker.html">
        <fieldset>
    <div class='input-group'>
        <input type="text" class="form-control" datepicker-popup="" ng-model="model" min-date="minDate" is-open="isOpened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
            <span ng-click="open()" class="btn btn-default input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
    </div>
</fieldset>
    </script>
    
    <custom-dir model="dateModel.date" min-date="dateModel.min" is-opened="isOpened"></custom-dir>
</div>

JavaScript

angular.module('demoApp', ['ui.bootstrap'])
    .controller('mainController', Controller)
    .directive('customDir', Directive);

function Directive() {
    return {
        scope: {
            model: '=',
            minDate: '=',
            isOpened: '='
        },
        transclude: true,
        restrict: 'E',
        templateUrl: 'templates/datepicker/datepicker.html',
        //controller: 'Ctrl'
        controller: function($scope) {
            $scope.open = function() {
                console.log('open popup now!!');
                $scope.isOpened = true;
            };
        }
    };
}

function Controller($scope) {
    $scope.open = function () {
        alert('HELLO'); // not called becasue of isolated scope of custom directive
    };
    $scope.dateModel = {
        date: new Date(),
        min: new Date()
    };
    $scope.isOpened = false;
}