Angularjs - 指令datepicke，修改CSS

我米使用这个指令来显示日期选择器：Angularjs - 指令datepicke，修改CSS

myApp.directive('jqdatepicker', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelCtrl) { 
      $(element).datepicker({ 
       dateFormat: 'yy-mm-dd', 

       onSelect: function(date) { 
        var ngModelName = this.attributes['ng-model'].value; 

        // if value for the specified ngModel is a property of 
        // another object on the scope 
        if (ngModelName.indexOf(".") != -1) { 
         var objAttributes = ngModelName.split("."); 
         var lastAttribute = objAttributes.pop(); 
         var partialObjString = objAttributes.join("."); 
         var partialObj = eval("scope." + partialObjString); 

         partialObj[lastAttribute] = date; 
        } 
        // if value for the specified ngModel is directly on the scope 
        else { 
         scope[ngModelName] = date; 
        } 
        scope.$apply(); 
       } 
      }); 
     } 
    };

我需要证明它在一个模态对话框。所以我需要修改CSS以改变的z-index：

datepicker.dropdown-menu{ 
    z-index:9999 
}

我不知道如何把这个CSS到我的指令。如果有人可以帮我...

谢谢。

来源

2014-12-04 user1260928

CSS可以使用jQuery这样的修改：

$(element).css('background','red');

你的情况：

$(element).find('.dropdown-menu').css('z-index','9999');

来源

2014-12-04 09:45:14

谢谢您的回答。当我调试javascript/css（使用Chrome的开发工具）时，我发现我的日历css是：element.style {display：block; top：141px; left：471.09375px; z-index：10; }，看来.dropdown菜单不是我应该修改的那个。在我的指令中改变z-index的正确方法是什么？我试过$（element）.css（'z-index'，'9999'）;但这不起作用。 – user1260928 2014-12-04 10:23:45

取决于您想要执行更改的元素。例如，你可以尝试$（element）.find（'div'）.css（'z-index'，'9999'）;将CSS应用于元素下的所有div。将'div'选择器更改为您想要修改的内容。 – 2014-12-04 10:58:57

当我点击我的输入时，日历显示在我的模式后面。当日历显示时，html生成的代码是：

我试过你的解决方案，但z-index保持等于10.如果我将它改为“实时”到9999，日历显示完美，所以我很确定z -index是要更改的css值。但是我现在还没有设法做到这一点。 – user1260928 2014-12-04 13:02:08

Angularjs - 指令datepicke，修改CSS

回答

相关问题