ng-controller不会输出变量

时间:2016-06-16 01:06:21

标签: angularjs

我还是很新,我在从控制器输出变量时遇到问题。我不确定我做错了什么。有什么建议。目前,该网页只是空白,除了Hello World之外没有任何文本,它位于控制器之外。如果我将它放在控制器div中,它也会消失。

的index.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myFirstApp">
{{"Hello World"}}
<div ng-controller="mainController as ctrl">
<div class="bookListing" ng-repeat="book in ctrl.books">
    {{book.title}}
{{book.author}}
{{book.date}}
</div>
</div>
</body>
</html>

app.js

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


app.controller('mainController', function(){
var books = [
{
title: "Title 1",
author: "Joe Bob",
date: new Date("2966", "04", "20")
},
{
    title: "Title 2",
    author: "Bob Joe",
date: new Date("2205", "06", "20")
},
{
title: "Title 3",
author: "Susie Joe",
date: new Date("2222", "09", "20")

}
];

});

1 个答案:

答案 0 :(得分:2)

var books是一个局部变量。为了将其传递给视图,您需要使其成为控制器的属性

var vm = this;
vm.books = [.....];

在视图中ctrl相当于控制器中的this