AngularJS ng-class无法覆盖Bootstrap下拉CSS规则


AngularJS ng-class cannot override Bootstrap dropdown CSS rules

我使用AngularJS-1.2.26指令ng-class尝试覆盖drops-menu和dropdown-header的Bootstrap 3.2 CSS规则，但是我的新字体大小，填充，边距不会影响html显示。

我正在成功使用AJS1.2.26 ng-class重写(BS3基类)navbar-brand，navbar-nav等(使用AJS技术)，如下所示：

1
2
3
App
<ul data-ng-class="settings.navbarNavDensity" class="nav navbar-nav">
<span data-ng-class="{invisible: settings.displayDensity != 'comfortable'}"> class="fa fa-check fa-fw" </span>Comfortable

我有一个显示导航栏工作的Plunker，但是下拉菜单不工作：

在上方的"柱塞"中，单击"齿轮图标"(例如，设置)以在"舒适舒适"，"紧凑型"和"导航栏"之间切换，但相关的下拉列表不会更改。

在MainController的.run中初始化变量displayDensity，navbarBrandDensity，navbarNavDensity，并在.controller中设置$ watches。基本思想是赞美GMail舒适，舒适，紧凑的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.run ...
$rootScope.settings = {
  displayDensity: 'cozy',
  navbarDensity: 'navbar-cozy',
  navbarNavDensity: 'navbar-nav-cozy',
  navbarBrandDensity: 'navbar-brand-cozy',
  navbarToggleDensity: 'navbar-toggle-cozy',
  faIconDensity: '',
  dropdownMenuDensity: 'dropdown-menu-cozy',
  dropdownHeaderDensity: 'dropdown-header-cozy'
};

.controller ...
$scope.$watch('settings.displayDensity', function() {
  $scope.settings.navbarDensity = 'navbar-' + $scope.settings.displayDensity;
  $scope.settings.navbarNavDensity = 'navbar-nav-' + $scope.settings.displayDensity;
  $scope.settings.navbarBrandDensity = 'navbar-brand-' + $scope.settings.displayDensity;
  $scope.settings.navbarToggleDensity = 'navbar-toggle-' + $scope.settings.displayDensity;
  $scope.settings.faIconDensity = 'fa-icon-' + $scope.settings.displayDensity;
  $scope.settings.dropdownMenuDensity = 'dropdown-menu-' + $scope.settings.displayDensity;
  $scope.settings.dropdownHeaderDensity = 'dropdown-header-' + $scope.settings.displayDensity;
});

下面的dropdown-menu-cozy是BS3的默认值，而dropdown-menu-comfortable是用户单击" Comfortable"时要应用的新规则

1
2
3
4
5
6
7
8
9
10
11
12
dropdown-menu-cozy {
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
}

dropdown-menu-comfortable {
  padding: 10px 0 !important;
  margin: 4px 0 0 !important;
  font-size: 18px !important;
  /* font-size: inherit !important; */
}

这是Chrome开发工具的屏幕截图，显示了我消除(即取消选中)最终得到的字体大小，内边距，边距的值，然后一切正常的情况。 (取消选中会导致下拉列表继承我在navbar父级中成功更改的规则)我正在使用pestiside CSS调试库来获取图片元素周围的那些行/框。

Chrome tools allows eliminating the offending rules
CSS让我发疯了！我是程序员宝贝！如果有人可以浏览小型Plunker并看到一些更好的方法，将不胜感激。

也许对我不了解的ng-class有所限制，或者在以后的AJS版本中进行了修复(由于IE项目的限制，尚未尝试使用1.3.x)

如果有人对BS3的这种舒适，舒适，紧凑的操作感兴趣，我可以使用Yeoman，Grunt，Bower制作完整的GitHub。

如果已经有压缩或扩展BS3填充的现有CSS文件(项目)，那么我当然会很感兴趣！

相关讨论

简单但讨厌的错误：

您在CSS指示类中忘记了dot

只需替换所有

1
2
3
dropdown-menu-... {
   ...
}

与

1
2
3
.dropdown-menu-... {
    ...
}
相关讨论