1

我正在尝试 在我的Plunk链接中实施 ProLoser 提供的解决方案。我的问题是，每当我按下链接而不是在链接下方的子视图中打开时，它都会覆盖整个视图。

我需要了解如何解决这个问题。

我的流程是这样的：index.html-> content.html（ng-view）-> link1/2/3.html（使用ng-include）。

我的布局：

在此处输入图像描述

索引.html：

<!DOCTYPE html>
<html ng-app="webApp">
  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <header>This is header</Header>        
    <div class="content" ng-view>

    </div>
  </body>

</html>

内容.html：

<div>
  <h1>This is Content brought to you by ngView</h1>
  <br>
  <a href="#/sub/link1">link1</a>
  <a href="#/sub/link2">link 2</a>
  <a href="#/sub/link3">link 3</a>

  <ng-include src="'/sub/'+link + '.html' "></ng-include>

</div>

我的代码：

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

//router logic
webApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'content.html',
            controller: 'MainCtrl'
        })
        .when('/sub/:link', {
            controller: 'LinkCtrl'
        })
        .otherwise({redirectTo: '/'});
}]);

//controllers
webApp.controller ('MainCtrl', function ($scope, $routeParams) {
    $scope.link = $routeParams.link
});
4

1 回答 1

1

您没有 LinkCtrl 来处理链接，如果您更改它应该可以工作：

.when('/sub/:link', {
        controller: 'LinkCtrl'
    })

至

.when('/sub/:link', {
        templateUrl: 'content.html',
        controller: 'MainCtrl'
    })

并编辑该行：

<ng-include src="'/sub/'+link + '.html' "></ng-include>

至：

<ng-include src="link + '.html'"></ng-include>
于 2013-11-14T14:13:09.447 回答