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

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;
}

但是当我尝试在这个 plunkr 中实现它时:http://plnkr.co/edit/y5WWgKtdPHQuBQTOWXU1?p=preview ，它不起作用(没有填充，图像接触)我还注意到，如果我使用开发人员工具(chrome)检查图像元素，该类被命名为“box ng-scope”。所以我猜这个名字改变了。所以首先，为什么会发生这种变化，我在哪里可以了解更多相关信息。其次，也是更重要的一点，我如何使用 css 调用由 angular 实例化的元素，以便我可以设置它们的样式？

Answer 1

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

就像你如何包含 .js 等，你需要在你的 html 文档的顶部包含你的 css 文件

添加:

<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>