Question

我根据以下documentation/tutorial教自己AngularJS。我为自己的项目略微调整了一下。我得到了一切工作，除了我无法弄清楚为什么'symbol-detail.html'视图没有从'symbol.json'文件中提取数据。我认为范围有问题吗？

我的json file is here。应用代码如下....

我的模板布局：

<!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'
        });
}]);

我的symbol-detail.html视图：

    <section class="row">

        <div class="col-lg-8">

        <nav>
            <ul class="pager">
            <li class="previous"><a href="#/"><span aria-hidden="true">&larr;</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-->

Answer 1

我猜你的“Details.html”（我认为你的意思是symbol-detail.html）没有显示JSON数据的原因是因为你没有提取任何数据， SymbolsDetailController。

尝试添加$get请求，就像您在SymbolsListController中所做的那样 注意：您还需要将$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]

}]);

这将使$scope.data中的SymbolsDetailController属性可以使用所有JSON编码的项目。

从项目集合中获取单个项目

我假设您在symbol-detail.html视图中，您希望显示单个项目的信息，而不是所有项目。
如果你想从JSON数组中获取一个单独的项目，你需要通过传递给$routeParams的ID将它从数组中取出，我已经添加了一些显示这个的伪代码。

然后，您应该能够将$scope.symbolItem绑定到您的视图：

<p>{{ $scope.symbolItem.<whatever> }}</p>

Answer 2

首先，您确定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>

Details.html部分模板不提取JSON属性..错误的范围？

2 个答案:

从项目集合中获取单个项目