javascript - 以 Angular 将伪类添加到自定义模板/指令

Question

我正在研究创建自定义下拉菜单的指令。一个常规的 HTML select 有一个伪类 active(例如，.mydropdown:active)，可以使用 css 设置样式。当下拉菜单打开时，选择保持事件状态。我想将此功能添加到我的指令中。我的模板基于按钮。按钮的默认行为是在单击(鼠标按下)时变为事件状态，因此当下拉菜单打开时它们不再处于事件状态。

这是下拉列表处于事件状态时的样子:

这是当我与它交互并且按钮不再处于事件状态时我的样子。我希望按钮在下拉菜单关闭之前保持事件状态:

这是我的指令的代码:

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

这里有一个 fiddle 来进一步解释:https://jsfiddle.net/krd3y6dx/7/

Answer 1

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

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

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