Changing the page title dynamically is an important feature in our AngularJS WordPress Theme. If you have checked some articles related to this topic, you might find it’s a bit hard to integrate those methods to our theme. There are two reasons:
We just moved the
#pagediv, that means the
titleelement is beyond the scope of our
app. Most of the tutorials use the
$scope.titleapproach to change page title, unfortunately it won’t work with our theme.
Most tutorials will predefine a title for each route, for example there are 3 files
c.html, and their titles are like
Page C. In such scenario it’s much easier to get and set the page title on
$routeChangeSuccessevent. But our case is a bit different that we’ll need to get a post from WP API first to know what the title is.
This post from stackoverflow gave me an idea to change the title with the global variable
document. Here’s the snippet I use to change the page title dynamically (line 7, line 14).
Note that I use
document.querySelector('title').innerHTML rather than
document.title, so special characters like HTML entities won’t be decoded. You can get full project files from the GitHub repo.
If you have any question related to my AngularJS WordPress theme series, just leave a comment here, I’ll get back to you as soon as I can.
I’m a senior web developer helping clients build their websites to grow businesses. Currently I’m based in Taipei, Taiwan.
I write things about WordPress, AngularJS and life. Whenever you’d like to find someone to talk about these topics, just get in touch!