AngularJS $routeProvider 不在 <div ng-view> 中显示 html 页面答案

【问题标题】：AngularJS $routeProvider not displaying html page in <div ng-view>AngularJS $routeProvider 不在 <div ng-view> 中显示 html 页面
【发布时间】：2017-04-25 00:47:51
【问题描述】：

我是 AngularJS 的新手，需要一些帮助来解决在传递参数时路由到另一个 html 页面的问题。我的应用程序有一个带有输入字段（名称和课程）的表单。用户输入的信息将显示在隐藏的表格中，除非它有数据要显示。

问题是当单击“显示信息”链接时，我没有被路由到 DisplayInfo.html 页面。

这里是代码：http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview

app.js 文件

var app = angular.module('student', []);

app.controller('StudentController', function($scope) {
    $scope.studentList = [];

    $scope.addStudent = function() {
    this.studentList.push({
    name: $scope.getName,
    course: $scope.getCourse,
    date: new Date()
  });

    $scope.getName = "";
    $scope.getCourse = "";
 };


    app.config(['$routeProvider',
        function($routeProvider) {
        $routeProvider.
       when('/DisplayInfo/:name', {
       templateUrl: 'DisplayInfo.html',
       controller: 'DisplayInfoController'
   });
 }
]);


app.controller('DisplayInfoController', function($scope, $routeParams) {


$scope.name = $routeParams.getName;

  });

});

Index.html

<!DOCTYPE html>
<html ng-app="student">


<head>

    <link rel="stylesheet" type="text/css" href="student.css">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


</head>

<body>

    <div class="container">
        <div id="header">
            <h1>Student Access</h1>
            <p>

            <fieldset>


                <br />
                <br />

                <form ng-controller="StudentController as studentCtrl" ng-submit="addStudent()">

                    <div ng-if="studentList.length > 0">
                        <table class="table table-striped">

                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Course
                                </th>
                                <th>
                                    Date
                                </th>
                            </tr>

                            <tr ng-repeat="getStudent in studentList track by $index">

                                <td ng-bind="getStudent.name">

                                </td>
                                <td  ng-bind="getStudent.course">

                                </td>
                                <td  ng-bind="getStudent.date | date:'MM-dd-yyyy'">

                                </td>
                                <td><a href="#DisplayInfo/{{getStudent.name}}">Display Info</a></td>

                            </tr>
                        </table>

                    </div>
                    <div ng-view></div>                       
                     <br />
                    <fieldset class="form-group">
                        <legend><strong>First Name</strong></legend>
                        <input ng-model="getName" type="text" class="form-control" title="Name" placeholder="Enter Student Name" />
                    </fieldset>

                    <fieldset class="form-group">
                          <legend><strong>Course</strong></legend>
                        <input ng-model="getCourse" type="text" class="form-control" title="Course" placeholder="Enter Course" />
                    </fieldset>

                        <input type="submit" class="btn btn-primary pull-right" value="Add Info" />

                </form>

            </fieldset>


        </div>
    </div>
        <!-- AngularJS Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">      </script>

<script src="app.js"></script>
</body>

DisplayInfo.html

Name: {{getStudent.name}}
Here are the details for todo item: #{{getStudent}.

【问题讨论】：

标签： angularjs

【解决方案1】：

我认为/ 中缺少：

<td><a href="#DisplayInfo/{{getStudent.name}}">Display Info</a></td>

应该是：

<td><a href="#/DisplayInfo/{{getStudent.name}}">Display Info</a></td>

【讨论】：