Question

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

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

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

我的布局：

enter image description here

的index.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>

content.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
});

Answer 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>

AngularJS - 部分和模板的嵌套不起作用

1 个答案: