AngularJS - nesting of partials and templates doesn't work

Question

I'm trying to implement the solution offered by ProLoser in link in my Plunk. My problem is that whenever I press a link instead of opening in a sub-view below the links it overrides the entire view.

I need to understand how to solve this problem.

My flow is like that: index.html -> content.html (ng-view) -> link1/2/3.html (using ng-include).

My layout:

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>

My code:

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

score 1 · Accepted Answer · answered Nov 14 '13 at 14:13

You don't have a LinkCtrl to handle the links, it should work if you change:

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

to

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

And edit the line:

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

to:

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

AngularJS - nesting of partials and templates doesn't work

1 Answers1