2014-12-15 2 views
0

Мои маршруты выглядит следующим образом:Показать обертоны, основанные на маршрутах - angularjs

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider 
     .when('/home', { 
      templateUrl: 'partials/home.html', 
      controller: 'PageCtrl' 
     }) 
     .when('/about', { 
      templateUrl: 'partials/about.html', 
      controller: 'PageCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/home' 
     }); 
}]); 

Мой Посмотреть файл выглядит следующим образом:

<body> 
    <header> 
    <!-- show below nav section if I am on "home" page--> 
    <nav class="menu-for-home"> 
     <h1>menus when on home page</h1> 
    </nav> 
    <!-- show below nav section if I am on "about" page--> 
    <nav class="menu-for-about"> 
     <h1>menus when on about page</h1> 
    </nav> 
    </header> 
    <div class="main-body-container-wrap" data-ng-view > 
    <!-- NgViews will be rendered here --> 
    </div> 
</body> 

Как вы можете видеть выше коде, у меня есть два разных СЧА разделы, позже я буду перемещать их в отдельные частичные части, мне нравится загружать эти частичные файлы в зависимости от того, на какой странице в данный момент я нахожусь.

+0

Почему бы не раздел заголовка, специфичный для этой страницы в 'home.html' и' about.html'? Это было бы самым простым решением, если ваши маршруты и страницы намного сложнее, чем пример, который вы предоставили. – Brett

+0

@Brett Я не хочу, чтобы раздел nav появился в классе «основной контейнер-контейнер», который я определил. – Syed

+0

затем поместите директиву ng-view на тело, так как все тело изменяется в зависимости от вида. –

ответ

1

Я предпочел бы использовать ng-show и ng-hide на основе переменной $ scope внутри PageCtrl. Или, может быть ng-switch, если вы считаете, что ваше меню будет расти ...

Что-то вроде:

<body> 
    <header> 
    <!-- show below nav section if I am on "home" page--> 
    <nav class="menu-for-home" data-ng-show="showHome"> 
     <h1>menus when on home page</h1> 
    </nav> 
    <!-- show below nav section if I am on "about" page--> 
    <nav class="menu-for-about" data-ng-hide="showHome"> 
     <h1>menus when on about page</h1> 
    </nav> 
    </header> 
    <div class="main-body-container-wrap" data-ng-view > 
    <!-- NgViews will be rendered here --> 
    </div> 
</body> 

Или с нг-переключателем:

<body> 
    <header ng-switch="currentHeader"> 
    <!-- show below nav section if I am on "home" page--> 
    <nav class="menu-for-home" data-ng-switch-default> 
     <h1>menus when on home page</h1> 
    </nav> 
    <!-- show below nav section if I am on "about" page--> 
    <nav class="menu-for-about" data-ng-switch-when="about"> 
     <h1>menus when on about page</h1> 
    </nav> 
    </header> 
    <div class="main-body-container-wrap" data-ng-view > 
    <!-- NgViews will be rendered here --> 
    </div> 
</body>