how to add different head two tags or different head information for my two directive

Question

how to add different head two tags or different head information for my two directive

55 Views Asked by codergirrl At 29 April 2025 at 22:12

I have main.cshtml file It has a head tag which includes css and js references.

I have two directives / templates. I want to have different two title. When page1 opened (has template1) I want page's title to be Page-1. When page2 opened (has template2) I want page's title to be Page-2.

I tried to put head tags to directive but it doesn't read title and icon-for-title.

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

It doesn't work neither like that or head tag is over the main div.

I tried to do with routing, in route giving title property but in config file rootScope can not be read.

So I tried to run() with module. But it didn't work too.

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

Can you please help how can I have these two different title and icons. Or if it has to be two different head tag to see them, how can I create these?

Original Q&A

There are 1 best solutions below

**Koen Weyn** · Answer 1

I don't have a lot of information to go on for your specific use case, but we set the title programmatically like this:

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

You could trigger this code on $stateChangeSuccess.

In this example, you define the title in the state definition and update it when the state changes:

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

This examples assumes you're using ui-router for routing.

how to add different head two tags or different head information for my two directive

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULARJS-DIRECTIVE

Related Questions in HEAD

Related Questions in ICO

Related Questions in ANGULARJS-TEMPLATES

Trending Questions

Popular # Hahtags

Popular Questions