当链接被点击时，如何定义路由以导航到详细页面？

Question

当链接被点击时，如何定义路由以导航到详细页面？

javascripthtmlangularjsroutesangularjs-routing

3

我希望您能帮助我实现列表和详情页面。

我有一个名为motorList.html的页面，其中列出了所有从服务器（数据库）检索到的电机，并以超链接的形式呈现。

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.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路由不熟悉，肯定有些地方出了问题，但不确定哪里错了。

请问有人能指导我一下吗？谢谢

- simbada

你在哪里有 ng-view？ - Arg0n

我没有并且不确定应该在哪里定义它以及它的作用是什么。你能指导我吗？ - simbada

请查看Pankaj的答案。您可以将其放置在模板加载位置。 - Arg0n

2个回答

0

这是因为href是一个常规属性，不会被angularJs评估。要使此表达式成为所需的链接，您必须使用ng-href，这样angularJs将评估该表达式并将其分配给href html属性。

你必须做出改变。

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>

- Dvir

1

除非我漏了什么，但你的解决方案对我没有起作用。 - simbada

请问您能否看一下我在 Pankaj 评论区最新发表的评论？ - simbada

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pankaj Parkar · Accepted Answer

您需要在页面上添加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>

更新

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

另外，您不需要在partial中包含html、head和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>