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

51 Views Asked by codergirrl At 08 April 2025 at 08:56

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 On 27 September 2018 at 13:58

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