как добавить разные теги заголовка или информацию о заголовке для моей директивы - PullRequest
Новая
       35

как добавить разные теги заголовка или информацию о заголовке для моей директивы

0 голосов
/ 27 сентября 2018

У меня есть файл main.cshtml. Он имеет тег head, который включает ссылки на css и js.

У меня есть две директивы / шаблоны.Я хочу иметь два разных названия.Когда страница1 открыта (имеет шаблон1), я хочу, чтобы заголовок страницы был Page-1.Когда страница 2 открылась (имеет template2), я хочу, чтобы заголовок страницы был Page-2.

Я пытался поместить заголовочные теги в директиву, но она не читает заголовок и значок для заголовка. 

<div style="height: 100%">
     <head>
       <title>{{::title}}</title>}}
       <link rel="shortcut icon" href="../../../../icons/icon1.ico">
     </head>    
<div class="..." >
    <div class="...">
        <div>...............

Он не работает ни так, ни над головой, тег над основным div.

Я пытался сделать с маршрутизацией, в маршруте давая свойство заголовка, но в файле конфигурации rootScope не может быть прочитан.

Поэтому я попытался запустить () с модулем.Но это тоже не сработало. 

module.run(function($rootScope){
      $rootScope.$on("$routeChangeSuccess", function(currentRoute, 
      previousRoute){
     //Change page title, based on Route information
     $rootScope.title = $route.current.title;  })  ;});

Подскажите, пожалуйста, как мне получить эти два разных названия и иконки.Или, если для их просмотра нужны два разных тега head, как я могу их создать?

1 Ответ

0 голосов
/ 27 сентября 2018

У меня не так много информации для вашего конкретного случая использования, но мы программно установили заголовок так: 

$document.prop('title', title);

Вы можете активировать этот код на $stateChangeSuccess.

В этом примере вы определяете заголовок в определении состояния и обновляете его при изменении состояния: 

var module = angular.module('someModule', ['ui.router']);

module.run(function($rootScope, $stateProvider, $document) {
  // use ui-router additional route data to configure the title of the state
  $stateProvider.state('someState', {
    url: 'someUrl',
    controller: 'SomeCtrl',
    templateUrl: 'some.tpl.html',
    data: {
      title: 'Your states title goes here'
    }
  });

  $rootScope.$on("$stateChangeSuccess", function(event, currentState) {
    //Change page title, based on title found in route definition
    $document.prop('title', currentState.data.title);
  });
});

В этом примере предполагается, что вы используете ui-router для маршрутизации.

...