Angularjs 当我单击视图 1 中的链接时，我无法导航到视图 2

Question

我在 stackoverflow 上搜索了一个简单的答案。是的。我相信我缺少一些简单的东西。这一切都在学习过程中。谢谢参观。

更新。我现在可以导航到 moreinfo.html 视图，但我没有绑定数据。

标题 ========！ Before modifications. index.html launches but 'View More Info' Links do Not work

标题 ========！ After modifications. 'View More Info' links work but No Bound Data

标题 ========！ moreinfo.html navigates fine to the view but again No Bound Data

stats.html  
//Main Point of Entry.    
<h2>Soccer</h2>
    Filter: <input type="text" ng-model="playersFilter.name" />
    <br /><br />
    <ul>
    <li>Sort By Category</li>
    </ul>
    <table>
        <tr>
            <th ng-click="doSort('Attempts')">Attempts</th>
            <th ng-click="doSort('Goals')">Goals</th>
            <th ng-click="doSort('Assists')">Assists</th>
            <th ng-click="doSort('Fouls')">Fouls</th>
            <th ng-click="doSort('Date')">Date</th>
            <th ng-click="doSort('average')">Average</th>
        </tr>
        <tr ng-repeat="player in players | filter:playersFilter | orderBy:sortBy:reverse">
            <td>{{ player.Goals }}</td>
            <td>{{ player.Attempts  }}</td>
            <td>{{ player.Assists }}</td>
            <td>{{ player.Fouls }}</td>
            <td>{{ player.date | date }}</td>
            <td>{{player.Goals / player.Attempts | number:2}}</td>   
            <td><a href ="#/moreinfo/{{ player.id }}"> View More Info</a></td>
        </tr>
    </table>
    <br />
    <span>Total Games: {{ players.length }}</span>

当我从 stat.html 页面单击“查看更多信息”链接时，这是我想要导航到的页面。但是什么都没有发生，并且在 Chrome 开发工具的控制台或网络选项卡中没有任何错误提示。

moreinfo.html  
<h2>More Information</h2>
<table>
    <tr>
        <th>TeamImage </th>
        <th>oppImage </th>
    </tr>
    <!--<tr ng-repeat ="player in players">-->
        <td>{{player.Image}}</td>
        <td>{{player.teamImage}}</td>
    </tr>
</table>

我已经嵌入了 json。

statsController.js  

    function() {

    var StatsController = function ($scope) {

        $scope.doSort = function(propName) {
           $scope.sortBy = propName;
           $scope.reverse = !$scope.reverse;
        };    
$scope.getAverage = function(){
    var average = 0;
    for(var i = 0; i < $scope.player.Goals.length; i++){
        var a = $scope.player.Goals[i];
        average += (player.Attempts / player.Goals);
    }
    return average;
}    

    $scope.players = [
    {
    id:1,
    games: [
           {
            "Goals": 1,
            "Attempts": 6,
            "Image": "http://www.soccer1.png",
            "opp": "USA",
            "Assists": 0,
            "team": "ECU",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam1.png",
            "date": "2014-03-31"
          },
          {
            "Goals": 0,
            "Attempts": 3,
            "Image": "http://www.soccer2.png",
            "opp": "CHI",
            "Assists": 1,
            "team": "KAZ",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam2.png",
            "date": "2014-04-02"
          }
        ]
},
{
    id:2,
    games: [
           {
            "Goals": 2,
            "Attempts": 2,
            "Image": "http://www.soccer22.png",
            "opp": "USA",
            "Assists": 0,
            "team": "ECU",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam22.png",
            "date": "2014-03-31"
          },
          {
            "Goals": 3,
            "Attempts": 3,
            "Image": "http://www.soccer33.png",
            "opp": "CHI",
            "Assists": 1,
            "team": "KAZ",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam33.png",
            "date": "2014-04-02"
          }
        ]
    }
];
};   
    StatsController.$inject = ['$scope'];

    angular.module('sportsApp')
      .controller('StatsController', StatsController);    
}());

我在下面嵌入了 json。这是很多冗余代码。理想情况下，我希望将所有 json 文件放在一个单独的文件中并使用工厂，但我正在一步一步进行。

    moreinfoController.js
    (function() {

    var MoreInfoController = function ($scope, $routeParams) {
        // get to the route and the playerId

        var playerId = $routeParams.playerId;
        $scope.games = null;

        function init() {
            for (var i= 0, len=$scope.players.length; i<len; i++){
                if($scope.players[i].id === parseInt(playerId)) {
                    $scope.games = $scope.players[i].games;
                    break;
                }
            }  
        }
// init();       

$scope.players = [
    {
    id:1,
    games: [
           {
            "Goals": 1,
            "Attempts": 6,
            "Image": "http://www.soccer1.png",
            "opp": "USA",
            "Assists": 0,
            "team": "ECU",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam1.png",
            "date": "2014-03-31"
          },
          {
            "Goals": 0,
            "Attempts": 3,
            "Image": "http://www.soccer2.png",
            "opp": "CHI",
            "Assists": 1,
            "team": "KAZ",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam2.png",
            "date": "2014-04-02"
          }
        ]
},
{
    id:2,
    games: [
           {
            "Goals": 2,
            "Attempts": 2,
            "Image": "http://www.soccer22.png",
            "opp": "USA",
            "Assists": 0,
            "team": "ECU",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam22.png",
            "date": "2014-03-31"
          },
          {
            "Goals": 3,
            "Attempts": 3,
            "Image": "http://www.soccer33.png",
            "opp": "CHI",
            "Assists": 1,
            "team": "KAZ",
            "Fouls": 1,
            "teamImage": "http://www.soccerTeam33.png",
            "date": "2014-04-02"
          }
        ]
    }
];
    init();
    };

    MoreInfoController.$inject = ['$scope','$routeParams'];

    angular.module('sportsApp')
      .controller('MoreInfoController', MoreInfoController);    
    }());

Answer 1

你的链接说

<td><a href ="#/moreinfo{{ player.id}}"> View More Info</a></td>

但我在你的 json 中看不到 player 的任何 id 属性。

这似乎是个问题。

此外，您的 href 中的 moreinfo 之后似乎也缺少 /。