Page not loading when using $location.path in angularJS



我正在尝试使用AngularJS进行加载HTML页面。

我的HTML页面就像:

<!DOCTYPE html>
<html lang="en">
<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>TSAPI Profiles list</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="main.js"></script>
<style type="text/css">
    .container{
        margin: 20px;
    }
</style>
</head>
<body>
    <div class="container" ng-app="TSAPIProfiles" ng-controller="TSAPIController">
        <div class="col-md-4">
        <p> <h4> TSAPI Profiles </h4> <br><br></p>
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>TSAPIProfile Name</td>
                    <td>ACD#</td>
                    <td>HUB...</td>
                </tr>
                <tr>
                    <td>AESServerPrimary</td>
                    <td>NorthACDTSAPI1</td>
                    <td>NorthACD</td>
                </tr>
                <tr>
                    <td>North</td>
                    <td>AESNorth1</td>
                    <td>ManualCBSDetails</td>
                </tr>
            </tbody>
        </table>
        <!-- Button -->
        <div class="btn-group-justified" >
              <div class="col-md-4" style="margin-left: 400px;" >
                <button name="savebutton" class="btn btn-primary" type="button" ng-click="add()">Add</button>
                <button name="resetbutton" class="btn btn-primary" type="button" ng-click="edit()">Edit</button>
                <button name="cancelbutton" class="btn btn-primary" type="button" ng-click="remove()">Remove</button>
              </div>
        </div>
    </div>
</body>
</html>   

和我的JS文件就像:

 var app = angular.module('TSAPIProfiles', [])
    app.controller('TSAPIController',['$scope','$location', function ($scope,$location) {
       $scope.add = function () {
        $location.path('TSAPIProfileCreate.html');
        }
    }]);

当我单击添加按钮时,它不会加载TSAPIProfileCreate.html。我无法找到原因。

尝试跟随manikandan答案,因为这是正确的方法(或使用ui-router(,但是如果您真的想进行这样的重定向,请使用: $window.location.href这样

$location.path('TSAPIProfileCreate.html'); // This is bad

$location.path在斜线不包括搜索字符串参数之后返回URL的一部分(问号之后(。

创建视图,然后使用$location.path。https://docs.angularjs.org/api/ngroute/directive/ngview

$location.path('TSAPIProfileCreate');

https://docs.angularjs.org/guide/qulocation

最新更新