-2

我正在寻找一种使用 ngRouting 在新窗口中打开模板的方法。我在我的索引页面中设置了一个 ng-view div，它允许我在我的中心页面中填充数据，但是如果用户选择在新窗口/标签中打开一个链接，页面会返回 404，因为它是期望 ngRoute 加载它的控制器和模板。有什么方法可以让 Angular 处理这个选项？

下面是我的索引页

<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js"></script>

<body ng-controller="routeController" ng-init="init()">
    <div id="wrapper" class="page"> 
        <ul id='settingsLink' class='settingsLink' ng-mouseleave="hideSettingsLink()">
            <li><a href="index.html#!/login">Login</a></li>
            <li><a href="index.html#!/page2">Page 2</a></li>
            <li><a href="index.html#!/page3">Page 3</a></li>
        </ul>
        <div id="viewcontent">
             <div ng-view></div>
        </div>
    </div>
</body>

这是我的 routeController 配置代码：

angular.module('myApp').config(function($routeProvider, $locationProvider, $sceDelegateProvider){

       $routeProvider

       // route for the Login page
       .when('/login', {
           templateUrl : 'pages/login.html',
           controller  : 'AuthenticateController'
       })

       // route for page 2
       .when('/page2', {
           templateUrl : 'pages/page2.html',
           controller  : 'Page2Ctrl'
       })

       // route for page 3
       .when('/page3', {
           templateUrl : 'pages/page3.html',
           controller  : 'Page3Ctrl'
       });

       $locationProvider
       .html5Mode(false)
       .hashPrefix('!');
   });

假设我要打开第 3 页。如果我右键单击并尝试在新选项卡中打开，我的页面将解析回“index.html#!/login”，而不是“index.html#!/page3”。

4

1 回答 1

0

如果您在 HTML5Mode 中使用 ngRoute，则 URL 中不会有哈希，并且服务器会认为您正在尝试访问文件，而实际上您正在获得 Angular 视图。您需要使用 hashbang 模式来解决此问题。在您配置路线的位置（使用$routeProvider），添加以下内容：

$locationProvider
  .html5Mode(false)
  .hashPrefix('!');

现在在您的链接中，添加哈希：

<a href="#!/path">link</a>
于 2015-09-03T17:44:04.320 回答