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

【问题标题】：(AngularJS / ng-route) How to get inputs for the template?(AngularJS / ng-route) 如何获取模板的输入？
【发布时间】：2016-06-07 11:39:52
【问题描述】：

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

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

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

这是我的代码。

索引.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>

【问题讨论】：

标签： javascript angularjs controller ngroute ng-view

【解决方案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}}。

【讨论】：

$scope.books 是出现在 index.html 中的书籍列表。列表中的每本书都有一个指向 ng-view 的链接，该链接应该提供有关每本书的更多信息。如果我使用 ng-repeat，我将获得所有书籍的信息，而我只想获得用户点击的书籍的信息。我对编程很陌生，所以我在这里也可能完全错了。
啊，我明白了。所以我注意到 routeCtrl 在应用程序和 ng-view 内部（通过路由器）都使用。我可能会尝试使用单独的控制器来实现单独的功能。然后，假设您没有在 ng-view 中初始化新范围，您应该能够访问 routeCtrl 范围（即 $scope.books）并在其中查找具有传递 id 的书并将其附加到范围.
对，太棒了。现在是菜鸟部分：如何查找具有传递 id 的书并将其附加到范围？
ID如何与$scope.books中的数据对应？数组的索引？如果是这样：books[bookID].name 等 bookID 应该可以从 $routeParams['bookID'] 访问。您可能需要在 bookID 上 parseInt （因为它将作为字符串传递）