2013-11-14 4 views
0

Я пытаюсь реализовать решение, предлагаемое ProLoser в link в моем Plunk. Моя проблема заключается в том, что всякий раз, когда я нажимаю ссылку, а не открываю в под-представлении ниже ссылок, она переопределяет весь вид.AngularJS - вложение партитур и шаблонов не работает

Мне нужно понять, как решить эту проблему.

Мой поток так: index.html ->content.html (ng-view) ->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="[email protected]" 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 
}); 

ответ

0

Вы не имеете 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> 
Смежные вопросы