2015-03-17 2 views
0

У меня есть классическое приложение AngularJS с маршрутизацией нескольких видов, каждый из которых имеет свой собственный контроллер. У меня есть несколько страниц отличаются от других, так что мой объем совместно HTML между страницами вроде низко:Обмен частичными страницами между представлениями в AngularJS

<html> 
<head>  
    <!-- typical header links --> 
</head> 
<body ng-app="NeXT"> 

<div class="div_view" ng-view></div> 

</body> 
</html> 

Но теперь, у меня есть несколько представлений, имеющих один и тот же заголовок, и мне интересно, как сделать их делиться одним и тем же заголовком, не изменяя этот файл, потому что у меня все еще есть некоторые страницы, в которых я не хочу заголовок. В принципе, я ищу «элемент управления», который я могу использовать между моими представлениями, поэтому мне не нужно копировать/Вставить мой заголовок в каждом представлении Мне это нужно.

Я уверен, что есть способ сделать это в AngularJS, но я не смог найти свой ответ в Google, как называется компонент, который я ищу?

Спасибо!

ответ

0

Итак, я воспользовался своей помощью с помощью директив, как посоветовал мне Базз. Для заголовка, я создал новую директиву, имеющую переменную области действия (скажем, «название»), а также ссылку на шаблон HTML файла:

 angular.module('next.directives', []) 
.directive('nextHeader', function() { 
    return { 
     restrict:'E', 
     transclude: true, 
     replace : true, 
     scope : { 
      'title': '@' 
     }, 
     templateUrl: "app/views/partials/header.html" 
    }; 
}); 

В файле header.html, я ставлю мой шаблон как (упрощенно):

<h1>{{ title }}</h1> 

И оттуда, где бы я ни был нужен заголовок, я мог бы написать тег

<next-header title="My awesome title"></next-header> 

, который заменит «следующего заголовка» в теге h1 с соответствующим названием. Это то, что я искал, исходя из среды ASP.NET MVC.

Надеется, что это может помочь кому-то, ура

1

Если вы хотите, чтобы ваш заголовок появится на некоторых страницах только вы можете:

а. создайте директиву своего заголовка и включите эту директиву в свой шаблон.

b. создайте директиву своего заголовка, разместите его за пределами своего вида и позвольте ему скрывать/показывать на определенных страницах. Это можно сделать, например, путем прослушивания события $ locationChangeSuccess с угловым.

+0

Спасибо за ваш ответ, так что с помощью директивы я могу написать что-то вроде

везде, где мне это нужно, и он может производить innerHTML как

Моего текст для отображения в заголовке

согласно как я его реализовал? – bviale

+0

Ну ... это больше вопрос об основах AngularJS по директивам. Постарайтесь узнать больше об этом. Один намек: вы, вероятно, хотите что-то сделать с переходом. –

Смежные вопросы