Question

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

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

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

提前谢谢！

Answer 1

对于第一个问题：为什么不给2 div一个不同的类，然后像那样采用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或类。你使用的预处理器或缺少没有区别。

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模板中？

2 个答案: