（AngularJS / ng-route）如何獲取模板的輸入？

Question

我有一個使用ng-route鏈接到新視圖的index.html文件（例如“ index.html / Book /：BookId”）。

在index.html文件上，我可以看到有關每一項（例如每本書）的所有適當信息。 在index.js上，我有一個名為routeCtrl的控制器，其中有一個列表，每個書對象都是該列表中的一個項目。

問題：雖然我可以鏈接到新的ng-view，但是我不知道如何獲取每個頁面的信息。 例如，如果單擊第一頁上的“ Macbeth”鏈接，則應該在新視圖中看到Macbeth的信息。

這是我的代碼。

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 =“ books in book”中訪問ng-repeat塊中的屬性，例如{{book.name}}。

（AngularJS / ng-route）如何獲取模板的輸入？

問題描述

1 個解決方案

解決方案1
0 已采納 2016-02-24 23:03:38

（AngularJS / ng-route）如何獲取模板的輸入？

問題描述

1 個解決方案

解決方案1 0 已采納 2016-02-24 23:03:38

解決方案1
0 已采納 2016-02-24 23:03:38