我根据以下文档/教程自学AngularJS。我为自己的项目稍微调整了一下。除了我不明白为什么"symbol detail.html"视图没有从"symbol.json"文件中提取数据之外，我什么都做了。我觉得示波器有问题吗？
我的json文件就在这里。应用程序代码如下。。。。
我的模板布局：
<!DOCTYPE html>
<html ng-app="symbolscatApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title ng-bind-template="{{query}}">Symbols catalog</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<div ng-view></div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
</body>
</html>
我的controller.js文件：
var symbolcatControllers = angular.module('symbolcatControllers', []);
symbolcatControllers.controller('SymbolsListController', ['$scope','$http',
function($scope, $http) {
$http.get('js/symbols.json').success(function(data) {
$scope.symbols = data;
});
$scope.orderProp = "alpha";//for selection dropdown
}]);
symbolcatControllers.controller('SymbolsDetailController', ['$scope', '$routeParams',
function($scope, $routeParams){
$scope.symbolName = $routeParams.symbolName;
}]);
我的app.js文件：
var symbolscatApp = angular.module('symbolscatApp', [
'ngRoute',
'symbolcatControllers'
]);
symbolscatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/symbols', {
templateUrl: 'partials/symbol-list.html',
controller: 'SymbolsListController'
}).
when('/symbols/:symbolName', {
templateUrl: 'partials/symbol-detail.html',
controller: 'SymbolsDetailController'
}).
otherwise({
redirectTo: '/symbols'
});
}]);
My symbol-detail.html视图：
<section class="row">
<div class="col-lg-8">
<nav>
<ul class="pager">
<li class="previous"><a href="#/"><span aria-hidden="true">←</span> Back</a></li>
</ul>
</nav>
<img ng-src="../images/icons/{{symbol.shortName}}.png">
<h1>{{symbol.name}}</h1>
<table class="table">
<thead>
<tr>
<th>Description</th>
<th>Group</th>
<th>keywords</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum condimentum sapien a risus pulvinar aliquam.</td>
<td>Transportation</td>
<td>boat, sea, ocean, water</td>
</tr>
</tbody>
</table>
</div><!--/.col-lg-8-->
<div class="col-lg-4">
<aside>
<h3>Related</h3>
<ul>
<li>Symbol1</li>
<li>Symbol1</li>
<li>Symbol1</li>
<li>Symbol1</li>
</ul>
</aside>
<section>
<h4>Downloads</h4>
<ul>
<li>cheatsheet</li>
<li>download file1</li>
<li>download file 2</li>
</ul>
</section>
</div><!--/.col-lg-4-->
</section><!--/.row-->
</div><!--/.container-->
我想您的"Details.html"（我想您指的是symbol-detail.html）没有显示JSON数据的原因是因为您在SymbolsDetailController中没有提取任何数据。
尝试像在SymbolsListController中那样添加$get请求
注意：您还需要将$http作为依赖项传递：
symbolcatControllers.controller('SymbolsDetailController', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http){
$scope.symbolName = $routeParams.symbolName;
// this will fetch data and attach to $scope.symbols
$http.get('js/symbols.json').success(function(data) {
$scope.symbols = data;
});
// Pseudo code for getting the particular item and attaching to $scope
//
// create property to hold individual item
// $scope.symbolItem = $scope.symbols[$routeParams.symbolName]
}]);
这将使SymbolsDetailController中的$scope.data属性可以使用所有JSON编码的项。
从项目集合中获取单个项目
我假设在symbol-detail.html视图中，您希望显示单个项目的信息，而不是所有项目的信息
如果你想从JSON数组中获得一个单独的项，你需要通过传递给$routeParams的ID将其从数组中提取出来，我已经添加了一些伪代码来显示这一点。
然后，您应该能够将$scope.symbolItem绑定到您的视图：
<p>{{ $scope.symbolItem.<whatever> }}</p>
首先，您确定json数据在控制器中可见吗？第二：你正在获取一个对象数组，但在你的视图中没有任何位置，您试图访问它。您试图显示｛｛symbol.name｝｝，但在"SymbolsDetailController"中有$scope.symbolName = $routeParams.symbolName;
尝试运行ng-repeat="symbol in symbols"，并在以下代码中显示symbol.name、symbol.group、symbol.description等详细信息：
<ul>
<li ng-repeat='symbol in symbols'>
<p>{{symbol.name}}</p>
<p>{{symbol.group}}</p>
<p>{{symbol.description}}</p>
</li>
</ul>