should-focus directive

should-focus directive

by tpeiffer

HTML

<!DOCTYPE html>
<body ng-app="MyApp" ng-controller="MyCtrl">
    <div class="container">
        <div class="top-half">This one uses a directive with isolate scope and it works!
            <br />
            <button ng-click="toggleTopDrawer()">Filter</button>
        </div>
        <div class="bottom-half">This one uses a directive with scope: false and it does not work!
            <br />
            <button ng-click="toggleBottomDrawer()">Filter</button>
        </div>
    </div>
    <!-- directive works -->
    <div class="drawer top" ng-class="{expanded: topDrawerOpen, collapsed: !topDrawerOpen}">
        <input class="filter-item" placeholder="Enter filter" does-focus="{{topDrawerOpen}}" type="text" />
        <br />
        <button class="filter-item" ng-click="toggleTopDrawer()">Close</button>
    </div>
    <!-- directive does not work -->
    <div class="drawer bottom" ng-class="{expanded: bottomDrawerOpen, collapsed: !bottomDrawerOpen}">
        <input class="filter-item" placeholder="Enter filter" does-not-focus="{{bottomDrawerOpen}}" type="text" />
        <br />
        <button class="filter-item" ng-click="toggleBottomDrawer()">Close</button>
    </div>
</body>

CSS

.top-half {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 50%;
    right: 0;
    border: solid 1px blue;
}
.bottom-half {
    position: absolute;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    border: solid 1px blue;
}
.filter-item {
    margin: 5px;
    width: 100px;
}
.drawer {
    background-color: rgb(219, 224, 228);
    color: #000;
    position: fixed;
    left: 100%;
    right: 0;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
}

.drawer.top {
    top: 0;
    bottom: 50%;
}

.drawer.bottom {
    top: 50%;
    bottom: 0;
}

.drawer.collapsed {
    left: 50%;
    width: 0px;
    border: none;
}
.drawer.expanded {
    left: 50%;
    width: 50%;
    border: solid 1px gray;
}

JavaScript

(function (app, ng) {
    'use strict';

    app.controller('MyCtrl', ['$scope',

    function ($scope) {

        $scope.topDrawerOpen = false;
        $scope.toggleTopDrawer = function () {
            $scope.topDrawerOpen = !$scope.topDrawerOpen;
        };
        $scope.bottomDrawerOpen = false;
        $scope.toggleBottomDrawer = function () {
            $scope.bottomDrawerOpen = !$scope.bottomDrawerOpen;
        };

    }]);
    app.directive('doesFocus', function ($timeout) {
        return {
            scope: {
                trigger: '@doesFocus'
            },
            link: function (scope, element, attrs) {
                console.log('SETUP: does-focus directive');
                console.log(' > scope id: ' + scope.$id);
                scope.$watch('trigger', function (value) {
                    console.log('CHANGE: does focus: ' + value);
                    if (value) {
                        $timeout(function () {
                            element[0].focus();
                            element[0].select();
                        });
                    }
                });
            }
        };
    });
    app.directive('doesNotFocus', function ($timeout) {
        return {
            scope: false,
            link: function (scope, element, attrs) {
                console.log('SETUP: does-not-focus directive');
                console.log(' > scope id: ' + scope.$id);
                scope.$watch('isDrawerOpen()',

                function (value) {
                    console.log('CHANGE: does-not focus: ' + value);
                    if (value) {
                        $timeout(function () {
                            element[0].focus();
                        });
                    }
                });
            }
        };
    });

}(angular.module('MyApp', []), angular));