將偽類添加到角度的自定義模板/指令中

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