I have code and I am trying to figure out the best way to have pages with their own title. Currently in the index.html it sets the title and somehow every page auto-inherits the title.
index.html snippet
<!DOCTYPE html>
<html>
<head>
<title>My Application</title>
...
The issue is for some reason I can't just go to a different page and type <title>This Window Section</title> in the <head> because it will still say "My Application". I've read around the it is possible to just add the title to the $stateProvider and it will change it but that doesn't change the title either.
applicationUIRoutes.js snippet
app.config(function($stateProvider, $urlRouterProvider) {
...
$stateProvider.state("application.graph", {
url: "/graph",
views: {
templateUrl: "apps/graph.html",
controller: "graphController",
controllerAs: "graphCtrl"
},
title: "Graph", // <-- Doesn't do anything. Page still says 'My Application'
}
...
}
graph.html snippet
<head>
<title>Graph</title> <!-- Doesn't work -->
...
What does work is setting it in the graphController.js and calling it in the html using ng-init. I don't want to have to do it this way (and I am pretty sure this is horrible and "hacky").
graphController.js snippet
...
function _setWindowTitle(title) {
document.title = title;
}
...
graph.html snippet
<head>
<div ng-init="graphCtrl.setWindowTitle("Graph");"></div> <!-- Works -->
...
Is there a way to maintain having the default index.html title be there and be able to override it without doing it my hacky way? I preferably want to do it in my applicationUIRoutes but I would be fine with just being able to type <title> title of something </title> in a page and have that properly override the index.html.
--UPDATED ATTEMPTS--
I have tried following Set Page title using UI-Router and Updating title tag using AngularJS and UI-Router as a guide and added the following:
applicationModule.js
var app = angular.module("myApp, [ " ..
]);
app.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$state = $stateParams;
}]);
applicationUIRoutes.js snippet
app.config(function($stateProvider, $urlRouterProvider) {
...
$stateProvider.state("application.graph", {
url: "/graph",
views: {
templateUrl: "apps/graph.html",
controller: "graphController",
controllerAs: "graphCtrl"
},
data: " { pageTitle: "Graph Test" }
}
...
}
graph.html snippet
<head>
<title ng-bind="$state.current.data.pageTitle></title>
But it still doesn't change the title. One thing I have noticed which is probably the issue is when inspecting in browser the actual code, it shows in the <head> that the title is "My Application (from index.html). And if I search the title I created is placed somewhere in the body as...
<div class="ng-scope" ui-view="">
<title class="ng-scope"> Graph Title </title>
</div>
Not sure with why this is happening. I imagine it is how the code is structured when using views but I have tried adding the title in different parts of the applicationUIRouter and it still doesn't change.
$rootScope.on("$routeChangeSuccess", ...with the<title ng-bind=in thegraph.htmlbut it still results in theMy Applicationtitle from theindex.html.