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

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

javascript html angularjs routing

Javascript 单击链接时，如何定义导航到详细信息页面的路由,javascript,html,angularjs,routing,angularjs-routing,Javascript,Html,Angularjs,Routing,Angularjs Routing,我需要一些帮助来实现列表和详细信息页面我有一个motorList.html页面，其中我将所有电机列为从服务器（数据库）检索到的hyperlink motorList.html <div> <ul class="phones"> <li ng-repeat="motor in motors" > <a href="#/motors/{{motor.Id}}">{{motor.Name}}

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

我有一个

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>

<!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>

<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>

motorDetails.html

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

<!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>

<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>

问题： 当我点击任何电机超链接时，它不会导航到

motorDetails.html

页面，但url会更改，例如

http://localhost:12270/View/motorList.html#/motors/161

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

谁能给我指路吗。

谢谢

这是因为

href

是一个常规属性，angularJs不会对其进行评估。要使此表达式成为您所需的链接，您必须使用

ng href

，因此angularJs将计算表达式并将其分配给

href

html attirbute

你必须改变

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

到

除获取其id外，您还必须在控制器中使用

$routeParams

。例如：

var id = $routeParams.motorId

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

更新我没注意到，但潘卡吉·帕克说得对。您必须使用

ng视图

使

routeProvider

将相关视图分配给正确的占位符

如何使用

ng视图

？必须在要使视图显示的位置创建一个元素。它可以是页面的一部分，也可以是整个页面。把元素放在你想要的地方，你就会明白

例如：

var id = $routeParams.motorId

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

您应该在页面上添加

ng view

指令，通过查看

URL

，该指令将显示从

$routeProvider

加载的

模板。您需要在身体的某个地方添加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视图
？我没有，也不确定应该在哪里定义它以及它的作用。你能引导我吗？看潘卡吉的回答。您可以将其放置在希望加载模板的位置。除非我遗漏了一些内容，但您的解决方案对我不起作用。您可以查看我在Pankaj comments上发布的最后一条评论吗？请检查并验证您的答案。请给我几秒钟。这必须添加到motorList.html或motorDetails.html？@simbada no。它应该添加到正文中。。请看我在回答中添加的片段。。如果你在partial
中添加它，那么它永远不会起作用。除非/直到我犯了一些灾难性的错误，否则你建议的解决方案对我不起作用。我在motorList.html文件中添加了ng view标记，但当我单击链接时，url会更改，但不会导航到motorDetails.html页面。我现在该怎么办？我不明白你称之为“部分视图”的html页面是什么。请看，我有两个html视图，即motorList.html和motorDetails.html。在motorList.html中，我有链接，当我单击它时，motorDetails.html应该加载详细信息。当你说“。它应该被添加到正文中。”正文中的哪个HTML文件？让我们来看看。