Add pseudo class to a custom template / directive in angular

Question

I am working on a directive that creates a custom dropdown menu. A regular HTML select has a pseudo class active (eg, .mydropdown:active) that can be styled using css. The select remains active while the dropdown menu is open. I would like to add this functionality to my directive. My template is based on buttons. The default behavior of buttons is to become active when clicked (mouse down) so while the dropdown is open they are no longer active.

Here is what a drop down looks like when it is active:

Here is what mine looks like when I interact with it and the button is no longer active. I want the button to remain active until the dropdown is closed:

Here is the code for my directive:

var app_dropdowns = angular.module('dropdown.directives', ['offClick']);

app_dropdowns.directive('dropdownMultiselect', function() {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
            labelname: '@labelname',
            pre_selected: '=preSelected'
        },
        template: "<div class='btn-group' data-ng-class='{open: open}' off-click='open=false'>" +
            "<button class='btn dropdown-toggle dropselect' active='true' data-ng-click='openDropdown();'>{{labelname}}<span class='caret' style = 'margin-left: 20px;'></span></button>" + "<ul class='dropdown-menu' style = 'min-width: 300px;' aria-labelledby='dropdownMenu'>" + "<li><a data-ng-click='selectAll()'><i class='fa fa-check-square-o'></i>  Select All</a></li>" + "<li><a data-ng-click='deselectAll();'><i class='fa fa-square-o'></i>  Select None</a></li>" + "<li class='divider'></li>" + "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option._id)'></span></a></li>" + "</ul>" + "</div>",
        controller: function($scope) {

            $scope.model = [];
            $scope.options = [];
            $scope.openDropdown = function() {
            console.log($scope.options.length)
        if (!$scope.open && $scope.options.length > 0){
            $scope.open = true;
        } else {
            $scope.open = false;
        }

            };

            $scope.selectAll = function() {
                $scope.model = [];
                angular.forEach($scope.options, function(item) {
                    $scope.model.push(item);
                });
                console.log($scope.model);
            };
            $scope.deselectAll = function() {
                $scope.model = [];
                console.log($scope.model);
            };
            $scope.setSelectedItem = function() {
                var _id = this.option._id;
                var index = -1;
                var i = 0;

                angular.forEach($scope.model, function(item) {
                    console.log(_id);
                    console.log(item._id);
                    if (item._id == _id) {
                        index = i
                    }
                    i = i + 1;
                });
                if (index > -1) {
                    $scope.model.splice(index, 1);
                } else {

                    $scope.model.push(this.option);
                    console.log($scope.model);
                }

                return false;
            };
            $scope.isChecked = function(_id) {
                var index = -1;
                var i = 0;
                angular.forEach($scope.model, function(item) {
                    if (item._id == _id) {
                        index = i
                    }
                    i = i + 1;
                });
                if (index > -1) {
                    return 'fa fa-check pull-right';
                }
                return false;
            };
        }
    }
});

I am creating css for the dropselect class:

.dropselect,
.dropselect:hover
 {
    height: 45px;
    background-color: #ffffff;
    border: 2px solid #dce4ec;
    border-radius: 4px;
    color: #2c3e50;
    font-size: 15px;
    line-height: 1.42857143;
    padding: 10px 15px;
    margin: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.dropselect:active,
.dropselect:focus {
    height: 45px;
    background-color: #ffffff;
    border: 2px solid black;
    border-radius: 4px;
    color: #2c3e50;
    font-size: 15px;
    line-height: 1.42857143;
    padding: 10px 15px;
    margin: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

Here is a fiddle to further explain: https://jsfiddle.net/krd3y6dx/7/

Answer 1

I figured it out. The trick is to add a new class that has the same css as the desired active state and then use ng-class to conditionally apply that class when the dropdown is open.

Fiddle: https://jsfiddle.net/krd3y6dx/9/

css:

.dropselect:active, .dropselect:focus, .dropactive {
    height: 45px;
    background-color: #ffffff;
    border: 2px solid black;
    border-radius: 4px;
    color: #2c3e50;
    font-size: 15px;
    line-height: 1.42857143;
    padding: 10px 15px;
    margin: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

and html template:

template: "<div class='btn-group' data-ng-class='{open: open}'>" +
        "<button class='btn dropdown-toggle dropselect' ng-class='{dropactive: open}' data-ng-click='openDropdown();' ng-disabled = 'options.length == 0'>{{labelname}}<span class='caret' style = 'margin-left: 20px;'>...