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

【问题标题】：AngularJS - nesting of partials and templates doesn't workAngularJS - 部分和模板的嵌套不起作用
【发布时间】：2013-11-27 13:59:21
【问题描述】：

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

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

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

我的布局：

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

【问题讨论】：

标签： angularjs

【解决方案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>

【讨论】：