Question

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

我有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页面，但是网址会更改，例如http://localhost:12270/View/motorList.html#/motors/161。

我是AngularJs路由的新手，我肯定在这里遗漏了一些东西，但不确定是什么问题。

请有人指导我。感谢

Answer 1

您应该在您的网页上添加ng-view指令，该指令会通过观看template来显示$routeProvider加载的URL。您需要在身体的某处添加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指令，这些指令会被加载（但我将其视为index.html页面，其中包含所有css＆amp; js引用）

此外，您无需加入html，head＆amp; body中的partial代码将被视为部分代码，因此请移除body，head＆amp; 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>

Answer 2

那是因为href是一个常规属性，而且它不是由angularJs评估的。要使此表达式成为您想要的链接，您必须使用ng-href，因此angularJs将评估表达式并将其分配给href html attirbute。

你必须改变

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

到

ng-href="#/motors/{{motor.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>

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

2 个答案: