javascript - 尝试使用 ng-repeat 时出现黑屏？

Question

所以我尝试使用 ng-repeat 来做“博客”之类的事情，我只是得到一个空白屏幕，控制台中没有错误，我一直在玩它，但不知道是什么我做错了!有人可以帮忙吗？这是我的代码:

HTML

<link rel="stylesheet" type="text/css" href="style.css">
<script src="angular.min.js"></script>
<script src="blog.js"></script>
<div class="myBlog" ng-app="app" ng-controller="blogController" ng-repeat="post in posts track by $index">
<h3>{{post.title}}</h3>
<p>{{post.date}}</p>
<p>{{post.content}}</p>
</div>

博客.js

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

app.controller('blogController', function($scope) {

    $scope.posts = [
    {title:'Test Post',date:'5/10/16',content:'This is a test!'},
    {title:'Test Post 2',date:'5/10/16',content:'This is the second test!'}
    ];


});

如果这有帮助，当我在打开的页面上检查 chrome 中的元素时，我会看到:

<!-- ngRepeat: post in posts track by $index -->

但仍然没有显示...

Answer 1

您需要将应用程序和 Controller 调用移到指定 ng-repeat 的 div 之外。

<div class="myBlog" ng-repeat="post in posts track by $index">
  <h3>{{post.title}}</h3>
  <p>{{post.date}}</p>
  <p>{{post.content}}</p>
</div>

看看 Plunker:http://plnkr.co/edit/gb4DgQFkvAsub4FLebbG?p=preview

通常，我喜欢在 html 标记中进行 ng-app 调用。我还在 div 元素上进行 ng-controller 调用，该元素包含与该 Controller 相关的所有代码。