如何在angularjs中将样式封装到html模板中？

Question

我有一个使用 AngularJS 和 Bootstrap 的网络应用程序。在一个页面中，我希望有两个具有不同样式的组件。例如：

<div ng-include="'./component/header.html'"></div>
<div ng-include="'./component/header.html'"></div>

我希望这 2 个 div 具有不同的样式。我的问题是，1）如何将样式代码封装到header.html中？ 2) 如何使用less来定义样式？

提前致谢！

Answer 1

第一个问题：为什么不给 2 div 一个不同的 class 然后采用 CSS 这样的：

<div class="first" ng-include="'./component/header.html'"></div>
<div class="second" ng-include="'./component/header.html'"></div>

CSS:

.first table {
    /* style definitions */
}

.second table{
    /* style definitions */
}

喜欢这个Snippet

Answer 2

您可以在 css 或更少的选择器下为每个 ng-include 和样式添加一个 id 或 class。使用什么预处理器或缺少预处理器都没有关系。

angular.module('app', []);

function HomeCtrl() {

}

* {
    box-sizing: border-box;
}
.header {
    padding: 20px;
    border: 1px solid #000;
}
#header1 {
    background: red;
}
#header2 {
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">

    <div ng-include="'header.html'" id="header1" class="header"></div>
    <div ng-include="'header.html'" id="header2" class="header"></div>

     <script type="text/ng-template" id="header.html">
       header
    </script>
</div>

如何在angularjs中将样式封装到html模板中？

How to encapsulate style into html template in angularjs?

html

css

less

twitter-bootstrap

angularjs