单击链接时，我如何定义导航到详细信息页面的路由

How do i define routing to navigate to details page when link clicked

本文关键字：导航 详细信息 路由 定义 链接 何定义 单击      更新时间：2023-09-26

我需要一些帮助来实现列表和详细信息页面。

我有一个motorList.html页面，我将所有电机列为从服务器（数据库）检索到的hyperlink。

motorList.html

<div>
    <ul class="phones">
        <li ng-repeat="motor in motors" >
            <a href="#/motors/{{motor.Id}}">{{motor.Name}}
        </li>
    </ul>
</div>

我想当用户点击任何电机链接时，系统应该导航到motorDetails.html页面，并显示点击/选择的电机的详细信息。

为此，我在app.js 中定义了如下路线

app.js

app.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/motors', {
            templateUrl: 'View/motorlist.html',
            controller: 'motorController'
        }).
        when('/motors/:motorId', {
            templateUrl: 'View/motordetail.html',
            controller: 'motorDetailsController'
        }).
        otherwise({
            redirectTo: '/motors'
        });
  }]);

motorDetails.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
        <ul class="phones">
            <li ng-repeat="motor in motors" class="thumbnail">
                <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
            </li>
        </ul>
    </div>
</body>
</html>

motorDetailsController.js

var app = angular.module('myApp', ['ngSanitize', 'ui.select']);
app.controller('motorDetailsController', function ($scope, $routeParams, motorService) {
    $scope.motors = null;
    $scope.getMotorDetails = function (Id) {
        motorService.getByMake(Id)
             .success(function (motors) {
                 $scope.motors = motors;
             })
        .error(function (error) {
            $scope.status = 'Unable to load motor data: ' + error.message;
        });
    }
});

问题：当我点击任何马达超链接时，它不会导航到motorDetails.html页面，但url会更改，例如http://localhost:12270/View/motorList.html#/motors/161。

我是AngularJs路线的新手，当然我在这里错过了一些东西，但不确定出了什么问题。

有人能给我指路吗。感谢

您应该在页面上添加ng-view指令，该指令将通过观看URL来显示从$routeProvider加载的template。您需要在身体的某个位置添加ng-view指令。

此外，您还应纳入@Dvir建议的更改。

标记

<body>
    <div>
        <ul class="phones">
            <li ng-repeat="motor in motors" class="thumbnail">
                <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
            </li>
        </ul>
    </div>
    <div ng-view></div>
</body>

更新

理想情况下，motorList.html中应该有ng-view指令，它会被加载（但我将其视为所有css和js引用所在的index.html页面）

此外，您不需要包括html、head&partial中的body标记将被视为部分标记，因此删除body、head&html标签，并通过只放置所需的模板使其变得简单。

motorDetails.html

<div>
    <ul class="phones">
        <li ng-repeat="motor in motors" class="thumbnail">
            <p>{{motor.Name}} {{motor.Make}} {{motor.Model}} {{motor.Year}} {{motor.Kilometers}} {{motor.Price}} {{motor.Color}} {{motor.SellerType}}</p>
        </li>
    </ul>
</div>

这是因为href是一个正则属性，它不是由angularJs计算的。要使该表达式成为您想要的链接，您必须使用ng-href，这样angularJs将对该表达式求值，并将其分配给hrefhtml attirbute。

你必须更改

href="#/motors/{{motor.Id}}"

至

ng-href="#/motors/{{motor.Id}}"

除了获取其id之外，您还必须在控制器中使用$routeParams。例如：

var id = $routeParams.motorId

更新我错过了，但@Pankaj Parkar是对的。您必须使用ng-view使routeProvider将相关视图分配给右侧占位符。

如何使用ng-view？你必须在你想让视图出现的地方制作一个元素。它可以是页面的一部分，也可以是整个页面。把元素放在你想放的地方，你就会明白。

例如：

<body>
   <div id="nav">
   </div>
   <ng-view>
     <!-- this is the place your html template will apear -->
   </ng-view>
</body>
相关文章：