如何在指令中添加具有其值的 css 类？答案

【问题标题】：How to add css class with it's value in Directive?如何在指令中添加具有其值的 css 类？
【发布时间】：2014-01-03 03:04:17
【问题描述】：

我有一个使用 jQuery DatePicker 插件的 AngularJS 指令。我只想使用 DatePicker 的几个月和几年。

在输入标签之前将以下css样式写入html页面时是可能的。

<div>
    <style type="text/css">
    .ui-datepicker-calendar {
        display: none;
        }
    </style>

    <input type="text" ng-model="xMonth" month-year/>
              {{ xMonth }}
</div>

但我想设置那个 css inside 指令。尝试使用子句 $('#ui-datepicker-div').toggleClass('.ui-datepicker-calendar', '显示：无'); 但我没有工作。

如何在 Directive 中设置 css？

angular.module('phonecatDirectives', [])
    .directive('monthYear', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs) {
            var elem = angular.element(element);
            elem.datepicker({
                dateFormat: "mm-yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                maxDate: +0,
                onClose: function(dateText, inst) {
                    var month, year;
                    month = $(".ui-datepicker-month :selected").val();
                    year = $(".ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1));
                    $('#ui-datepicker-div').removeClass('nodays');
                },
                beforeShow: function(input, inst) {
                    var dateString, options;
                    dateString = $(this).val();
                    options = {};
                    if (dateString.length > 0) {
                        options.defaultDate = $.datepicker.parseDate("dd-" + 
                      $(this).datepicker("option", "dateFormat"), "01-" + dateString);
                    }

                    // THIS DOESN'T WORK
                    $('#ui-datepicker-div').toggleClass('.ui-datepicker-calendar', 
                      'display: none');

                    if ($(input).hasClass('nodays')) {
                        $('#ui-datepicker-div').addClass('nodays');
                    } else {
                        $('#ui-datepicker-div').removeClass('nodays');
                        $(this).datepicker('option', 'dateFormat', 'mm.yy');
                    }
                    return options;
                }
            });
        }
    };
});

最好的问候戴夫

【问题讨论】：

你能发布 Fiddle/Plunker 吗？

标签： angularjs angularjs-directive

【解决方案1】：

问题不在于 AngularJS，而在于您如何使用 jQuery.toggleClass()。

此方法用于切换（通过添加或删除）CSS 选择器类名，而不是单个 CSS 属性。

您可以使用.css() 或功能等效的.hide() 将display:none 添加到元素以隐藏选定的类。此外，您需要通过 CSS 选择器而不是元素 ID 来定位元素。 # 前缀按元素 ID 选择，. 前缀按 CSS 选择器选择。

$('.ui-datepicker-div').hide(); // or $('.ui-datepicker-div').css({display: 'none'});

【讨论】：

我尝试了 hide 和 css 方法，但都没有解决问题。
老实说，我发现选择器#ui-datepicker-div 很奇怪，因为它针对id 的特定元素，这似乎不太可能是您想要的。所以也许这就是你的问题。但是，您的 HTML 示例还不够，因为它看起来不像您的代码所描述的那样。所以我们需要一个更清晰的例子（最好发布到 plunkr.co 或 jsfiddle.net 上）。话虽这么说，css 和 hide 工作，你只需要确保你的目标是正确的元素。
我要做的是在 Angular 中使用 jQuery Datepicker，这样它就不会显示日期，只有月份和年份。这在声明在 html 页面中，但它会影响 HTML 页面中的所有日期选择器。我不希望那样。所以，相反，我想制定一个指令，说明“只显示几个月和几年”。如果在同一个 HTML 页面中存在其他 Datepicker，它们会像 DatePickers 一样显示日期。
好吧，我有点想念它。您需要将$('#ui-datepicker-div').hide()（或css，如果您使用它）更改为$('.ui-datepicker-div').hide()。使用 # 为其前缀按元素 ID 选择。以. 为前缀，由 CSS 选择器选择，这就是您想要的。