(AngularJS / ng-route) 如何获取模板的输入？

Question

我有一个 index.html 文件，它使用 ng-route link 到新视图（例如 "index.html/Book/:BookId"）。

在 index.html 文件中，我可以看到关于每个项目（例如，每本书）的所有适当信息。在index.js上，我有一个名为routeCtrl的控制器，里面有一个列表，每个书对象都是那个列表中的一个项目。

问题：虽然我可以 link 到新的 ng-view，但我不知道如何获取每个页面的信息。比如我在第一页点击"Macbeth"link，在新的视图中应该可以看到麦克白的信息

这是我的代码。

Index.html:

<html>
...
<body ng-app="routeApp" ng-controller="routeCtrl">
  <div ng-view></div>
  <div ng-repeat="book in books">
    <h1><a href="Book/{{ book.url }}">{{ book.name }}</a></h1>
  </div>
</body>
</html>

Index.js:

var app = angular.module('routeApp', ['ngRoute']);
app.controller('routeCtrl, function($scope, $route, $routeParams, $location) {
  $scope.$location = $location;
  $scope.$route = $route;
  $scope.$routeParams = $routeParams;
  $scope.books = [
    Atlas Shrugged = { name: "Atlas Shrugged", author: "Ayn Rand", url: "atlas"},
    Neuromancer = { name: "Neuromancer", author: "William Gibson", url: "neuro"}
  ];
});

app.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Book/:bookId', {
      templateUrl: 'book.html',
      controller: 'routeCtrl',
  })

  $locationProvider.html5Mode(true);
});

Book.html（进入 ng-view）：

<div> // this is the part I don't understand. How do I retrieve each book's information from the object in the JS file?
  <h1>{{ BOOK NAME }}</h1>
  <h3>{{ BOOK AUTHOR }}</h3>
</div>

Answer 1

这里的$scope.books是什么？你会在你的 HTML 模板中使用那个（书籍），但你不能真正遍历像这样格式化的列表。

试试这个：

$scope.books = [
  { name: "Atlas Shrugged", author: "Ayn Rand", url: "atlas"},
  { name: "Neuromancer", author: "William Gibson", url: "neuro"}
];

这将在模板中产生一个 "books" 对象，您可以 ng-repeat="book in books" 并访问 ng-repeat 块中的属性，如 {{book.name}}正如您在上面所做的那样。

(AngularJS / ng-route) 如何获取模板的输入？

(AngularJS / ng-route) How to get inputs for the template?

javascript

controller

angularjs

ng-view

ngroute