将伪类添加到角度的自定义模板/指令中

Question

我正在创建一个自定义下拉菜单的指令。 常规HTML选择具有可使用CSS设置样式的伪类活动类（例如.mydropdown：active）。 下拉菜单打开时，选择保持激活状态。 我想将此功能添加到我的指令中。 我的模板基于按钮。 按钮的默认行为是在单击（鼠标向下）时变为活动状态，因此当下拉列表处于打开状态时，它们将不再处于活动状态。

下拉菜单处于活动状态时的外观如下：

这是我与之互动时的样子，并且该按钮不再处于活动状态。 我希望按钮在下拉列表关闭之前保持活动状态：

这是我的指令的代码：

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;
            };
        }
    }
});

我正在为dropselect类创建CSS：

.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;
}

这是一个进一步解释的小提琴： https : //jsfiddle.net/krd3y6dx/7/

Answer 1

我想到了。 诀窍是添加一个具有与所需活动状态相同的CSS的新类，然后在下拉列表打开时使用ng-class有条件地应用该类。

小提琴： 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;
}

和html模板：

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;'>...