假设我的 AngularJS 应用中有 2 个页面，一个显示有关作者的信息，另一个显示有关书籍的信息。我为每一个都有一个单独的模板文件、 Controller 和路由。在作者页面上，我想显示有关他最近写的书的信息。我该怎么做？
我的每个路由都嵌入一个 URL 参数，它告诉 Controller 哪个作者或书籍获取数据:
.when('/authors/:authorId', { templateUrl: 'author.html', controller: 'AuthorsController')
.when('/books/:bookId', { templateUrl: 'book.html', controller: 'BooksController')
据我了解，我不能使用 ng-include因为它不支持路由参数，只支持模板文件。我可以使用 IFrame，带有 src="/books/<bookId>" ，但感觉应该有一种 Angular 方式来使用 URL 参数进行客户端包含。我读了URL Routing ui-router 的 wiki 页面，但这仅涵盖 URL 请求的接收端。
ng-view似乎也不是正确的解决方案，因为我已经在我的 index.html 中使用它格式化模板。这是我要显示的 HTML 的逻辑结构:
<html ng-app="myApp">
<body>
<!-- displays template from the current route, e.g. /authors/1 -->
<div data-ng-view>
<!-- this HTML is loaded from the author.html template -->
Author: George R. R. Martin
(other author details...)
Most recent book:
*** THIS IS MY PROBLEM -- HOW TO INCLUDE /books/1 ? ***
<!-- this HTML is loaded from the book.html template -->
Title: A Dance with Dragons
Pub. date: 2011
...
</div>
</body>
</html>
澄清一些事情:
- 我的模板文件显示有关作者(例如姓名、年龄)和书籍(例如书名、出版日期)的一般信息。它们并不特定于特定的作者/书籍，因为所有详细信息都填充了来自绑定(bind)到
$scope的服务器的数据。 ，例如{{ book.title }}. - 在作者页面上，
$scope.latestBookId包含我要显示的图书的 ID。问题是如何使用这个ID来ng-include我的book.html模板。
这就是我正在尝试做的事情:
app.controller('AuthorsController', function($scope) {
var authorId = $routeParams.authorId;
// these values would be retrieved from the server, using authorId:
$scope.author = ...;
$scope.allBooks = [1, 2, ..., 123];
$scope.mostRecentBookId = 123;
});
来自author.html的片段:
Author: {{author.name}}
Most recent book:
<!-- all I'm trying to do is to include HTML from a route, but ng-include doesn't support using routes :( -->
<div ng-include='/books/{{mostRecentBookId}}'></div>
All books:
<!-- this is where @Akeem's solution breaks down; the knowledge of which bookId to include comes from the HTML below, not the AuthorsController -->
<div ng-repeat="bookId in allBooks">
<div ng-include='/books/{{bookId}}'></div>
<br/>
</div>
编辑 我已将 @Akeem 建议的解决方案应用于我的示例，并添加了关于为什么它对我不起作用的评论:http://plnkr.co/edit/o8QbzKqPGjVPcLir80eQ
最佳答案
根据我的理解，虽然 ng-include 创建了一个新的作用域，但它也从其父作用域继承了变量。因此，您可以在 AuthorsController 中设置 $scope.bookId 并在 BooksController 中检查此变量。
app.controller('AuthorsController', function($scope) {
$scope.bookId = 123;
});
app.controller('BooksController', function($scope,$routeParams) {
if(!$scope.bookId){
$scope.bookId= $routeParams['bookId'];
}
var books = {'1' : 'To Killing a Mockingbird', '23' : 'Harry Potter', '123':'Catch 22'};
$scope.title = books[$scope.bookId];
});
从那里，您可以将 ng-include 指令与 ng-controller 指令结合起来，以在您的author.html模板中使用BooksController
<div ng-include src='"books.html"' ng-controller='BooksController'></div>
最后，在 books.html 中，您将正常引用所有变量
<h1>{{title}}</h1>
<p>This is a book with an id of {{bookId}}</p>
<hr>
关于javascript - AngularJS 使用路由参数进行客户端包含的方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22438132/