Question

我是angularjs的新手。我正在创建一个基本应用程序，其中主页有一个菜单下拉，选择一个试图打开另一个index.html的值。

Index.html具有ng-view模板。默认情况下，它会显示directory.html的内容，点击查看详细信息按钮后，应加载view.html。

但点击查看详细信息按钮，而不是view.html，主页正在加载。

以下是代码段，请您在错误编码的地方告诉我。

 Home page html:
/******************************
<body>
 <div class="states-menu">
        <div class="dropdown">
        <button class="dropbtn">Select</button>
            <div class="dropdown-content">
                <a href="partials/index.html">CA</a>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="mainapp.js"></script>
</body>
*************************************/

mainapp.js
/********************
var myapp = angular.module('APP', [] );
**********************************************/

Index.html
/**********************
<!DOCTYPE html>
<html lang="en" ng-app="APP">
  <head>
    <title>testapp</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>

    </style>

  </head>
  <body>
    <div class="container">
        <div ng-controller="directoryController" ng-init="getRecords()">
            <div>
                <div ng-view></div>
            </div>
    </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
    <script src="app.js"></script>
  </body>
</html>
********************************************/

app.js
/**************
var myapp = angular.module('APP', ['ngRoute'] );

    myapp.config(function($routeProvider){
        $routeProvider.
        when('/',{templateUrl:'directory.html'}).
        when('/view/:id',{templateUrl:'view.html',controller:'viewController'}).
        otherwise({redirectTo:'/'})
    });

    myapp.controller('directoryController',['$scope','$http',function($scope, $http){
        $scope.rows = [];
        $scope.getRecords = function(){
            $http.get('action.php', {
                params:{
                    'type':'view'
                }
            }).success(function(response){
                if(response.status == 'OK'){
                    $scope.rows = response.records;
                }
            });
        };
    }]);
    myapp.controller('viewController',['$scope','$routeParams',function($scope, $routeParams){
        $scope.detail = [];
        $scope.detail = $scope.rows[$routeParams.id] 

    }]);
*******************************/
Directory.html
/************************************
<table>
    <thead >
        <tr>
            <th>#</th>
            <th>Name</th>
          </tr>
    </thead>
    <tbody>
        <tr ng-repeat="a in rows">
            <td>{{$index + 1}}</td>
            <td>{{a.NAME}}</td>
            <td>
               <a class="btn" type="button" name="vidwdetails" href="/#/view/{{$index}}">View Details </a>
            </td>
          </tr> 
    </tbody>
</table>
*************************************/    

View.html
/**************************
<h1>{{detail.DETAIL}}</h1>
*******************************/

ngRoute未加载所需的模板：URL

0 个答案: