【发布时间】:2015-04-20 08:42:44
【问题描述】:
我正在编写一个基本的角度路由代码,如果用户点击显示详细信息,将显示相应的订单 ID。我收到错误。我哪里出错了?我添加了一个示例 HTML 文件。
<html ng-app="sample">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="test">
<div class="container">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Order</th>
<th>Details</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{order.id}}</td>
<td>{{order.number}}</td>
<td>{{order.details}}</td>
<td><a href="#ShowOrder/{{order.number}}">show details</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var sample=angular.module("sample",[]);
sample.controller("test",function($scope){
var person1={id:"1",number:"1234",details:"samsung mobile"};
var person2={id:"2",number:"1235",details:"motorola mobile"};
var person3={id:"1",number:"1236",details:"MI3 mobile"};
var person=[person1,person2,person3];
$scope.orders=person;
});
sample.config(function($routeProvider){
$routeProvider.when("/ShowOrder/:id",
{controller:"showOrderCtrl",templateUrl:"template/order.html"});
})
sample.controller("showOrderCtrl",function($scope,$routeParams){
$scope.order_id=$routeParams.id;
})
</script>
【问题讨论】:
-
您似乎缺少
angular-route.js和ngRoute对于初学者的模块依赖项。<script>标签也应该在<body>内。此外,如果没有明确说明错误是什么,就说 “我收到错误” 是没有意义的。 -
为什么script标签需要在body里面?
-
@YangLi 或
<head>,只是在</body>之后OP 没有它 -
@Phil 我忘了使用 ng-views 并注入 ng-route,这就是问题所在。它现在工作正常。