javascript - 单击链接时如何定义路由以导航到详细信息页面

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

我有一个 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 指令，它将通过观察 来显示从 $routeProvider 加载的 template >网址。您需要在 body 的某处添加 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 指令，它会被加载(但我将其视为 index.html 页面，其中所有那里有 css 和 js 引用)

此外，您不需要在 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>

关于javascript - 单击链接时如何定义路由以导航到详细信息页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34107906/

javascript - 单击链接时如何定义路由以导航到详细信息页面

上一篇：html - Flexbox 样式不适用于元素

下一篇：html - CSS - 导航不合适