使用原生句柄将 CSS 应用于 Angular 指令（自定义或非自定义）答案

【问题标题】：Apply CSS to Angular directives (custom or not) with native handle使用原生句柄将 CSS 应用于 Angular 指令（自定义或非自定义）
【发布时间】：2014-04-30 02:00:19
【问题描述】：

假设我有一个带有如下指令的 Angular 应用程序：

<!doctype html>
<html lang="en" ng-app="cfd">
  <head>
    ...
  </head>
  <body>
    <div class="container">    
      <!-- Header -->
      <div ui-view="header" class="row"></div>

      <div ui-view="main" class="row">
        <!-- Sidebar/Nav -->
        <div ui-view="sidebar" class="col-xs-3"></div>
        <!-- Content -->
        <div ui-view="content" class="col-xs-9"></div>
      </div> 

      <!-- Footer -->
      <div ui-view="footer" class="row"></div>
    </div>
  </body>
</html>

如何使用 Angular 指令句柄 ui-view 或任何其他自定义指令将 CSS 应用于指令，而不添加 HTML ID 句柄。所以对于“主要”部分，我不想要以下内容：<div id="main" ui-view="main" class="row">。

我试过.ui-view#main 和ui-view#main。

【问题讨论】：

标签： html css angularjs angularjs-directive

【解决方案1】：

如果我理解正确，您想在 CSS 中使用 angular 指令 ui-view 作为标识符吗？

在您的 CSS 文件中，您可能会使用

div[ui-view=main] {
    /* styles for main go here, duh! */
}

似乎可以在 Chrome 中工作 (http://plnkr.co/edit/r1fvheUs8S6AJHv4Dm59?p=preview)

如果你想要条件样式，你应该使用

<div ng-class="{'className': 'angular condition'}"></div>

【讨论】：