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），该类名为＆＃34; box ng-scope＆＃34;。所以我想这名字改了。首先，为什么这会改变，我在哪里可以了解更多。其次，更重要的是，如何用css调用angular实例化的项目，以便我可以设置样式？

Answer 1

您的样式表未包含在Plunker中。包含样式表，它可以正常工作：http://plnkr.co/edit/B0r5DlNjskQ2AmNsTFBF?p=preview

此外，增加了＆＃34; ng-scope＆＃34;上课对这里的任何事都没有影响。元素可以有多个类，您可以使用任何一个类（或它们的组合）来定位元素。例如，可以使用.c1，.c2或.c1.c2定位此div：

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

Answer 2

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

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

添加：

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

e.g。

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

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

2 个答案: