如何将css元素添加到ng-重复模板？

Question

我有这个html代码：

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}' name='test' class="box">
  </div>
</div>

这个css：

.box {
  padding: 5px;
}

但是，当我尝试在这个http://plnkr.co/edit/y5WWgKtdPHQuBQTOWXU1?p=preview中实现它时，它不能工作(没有填充，图像是触摸的)，我还注意到，如果我使用developer tools (chrome)检查图像元素，这个类被命名为"box作用域“。所以我想名字改了。所以，首先，为什么这个变化，我可以从哪里了解到更多。第二，更重要的是，如何用css调用以角为例的项，以便对它们进行样式化？

Answer 1

您忘了在index.html文件中包含样式表。

就像您如何包含.js等等一样，您需要将css文件包含在html文档的顶部。

加：

<link rel="stylesheet" type="text/css" href="style.css">

例如：

<script type='text/javascript' src='jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script type='text/javascript' src='ng-infinite-scroll.min.js'></script>
<script src="script.js"></script>
<!-- You needed to add this line below -->
<link rel="stylesheet" type="text/css" href="style.css">

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='loadMore()' infinite-scroll-distance='1'>
    <img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}' name='test' class='box'>
  </div>
</div>

Answer 2

您的样式表不包括在柱塞中。包含样式表后，它工作得很好：http://plnkr.co/edit/B0r5DlNjskQ2AmNsTFBF?p=preview

此外，在类中添加“ng-作用域”并不会影响到这里的任何内容。一个元素可以有多个类，并且您可以使用任何一个类(或它们的组合)来针对该元素。例如，这个div可以用.c1、.c2或.c1.c2作为目标。

<div class="c1 c2"></div>