个人中心
gpt4 book ai didi

javascript - AngularJS 使用路由参数进行客户端包含的方法是什么？

转载 作者：行者123 更新时间：2023-11-28 08:25:43 25 4
gpt4 key购买 nike

假设我的 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>

澄清一些事情:

  1. 我的模板文件显示有关作者(例如姓名、年龄)和书籍(例如书名、出版日期)的一般信息。它们并不特定于特定的作者/书籍，因为所有详细信息都填充了来自绑定(bind)到 $scope 的服务器的数据。 ，例如{{ book.title }} .
  2. 在作者页面上，$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/

25 4 0
文章推荐： javascript - 从网站的另一个页面获取博客文章信息(它们具有相同的类，需要注意顺序)
文章推荐： javascript - 打开附件时自动显示打印对话框
文章推荐： arrays - 如何从 FireBase 访问嵌套的 NSDictionary 数据
文章推荐： 指向具有(虚拟)继承的模板类的 C++ 指针
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com