JSFiddle - React, Tailwind, and code Playground

by supatwo

HTML

<div ng-controller="MenuCtrl" ng-app="App">
    <button ng-click="toggleMenu()">{{showMenuMsg}}</button>
    <div ng-show="showMenu">
        <input type="text" focus-if="showMenu">
    </div>
</div>

JavaScript

app = angular.module('App', []);
app.controller('MenuCtrl', function ($scope) {
    console.log('in ctrl');
    $scope.showMenu = true;
    $scope.showMenuMsg = "Show Menu";
    $scope.toggleMenu = function()
    {
        $scope.showMenu = !$scope.showMenu;
        $scope.showMenuMsg = $scope.showMenu? "Show Menu":"Hide Menu";
    }

});
app.directive('focusIf', [function () {
    return function focusIf(scope, element, attr) {
        scope.$watch(attr.focusIf, function (newVal) {
            if (newVal) {
                element[0].focus();
            }
        });
    }
}]);