AngularJS dynamic page title keeps loading curly brackets first

Question

<title ng-show="pageName">{{ $root.pageName }} - Domain Name</title>

I'm trying to change the page title dynamically, when the page is loading the title preloads {{ $root.pageName }} - Domain Name instead of being - Domain Name then loading $rootScope.pageName when its rendered.

Is there a way to hide {{ $root.pageName }} from being shown on page load till the application picks up the variable?

Answer 1

You can do it like this:

<title ng-bind="$root.title + ' - Your site'">Your site</title>

Note that in this case the title is on the $rootScope .

EDIT: Just tested and it looks like the dash keeps showing, however this should prevent it:

<title ng-bind="$root.title ? $root.title + ' - Your site' : 'Your site' }]}">Your site</title>

Answer 2

you can use ng-cloak directive to hide raw (uncompiled) form data.i think it will help you.

<title ng-cloak>{{ $root.pageName }} - Domain Name</title>

The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.

see this link for detail.

Answer 3

Using ng-show in title doesn't make sense. You could do something like:

<title ng-bind="'MyApp - ' + $root.title">MyApp - Welcome</title>

$routeProvider.when('/product', {templateUrl: '/partials/product.html',  controller: 'ProductCtrl', title: 'Discover our Product'}).when('/about', {templateUrl: '/partials/about.html', controller: 'AboutCtrl', title: 'About US'});

on your run(), add a $rootScope.$on:

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

Read the Full source: https://coderwall.com/p/vcfo4q

Answer 4

Yes it is possible.

Do something like this

<title ng-show="pageName">
    <span ng-model="pageName"></span>
    <span> - Domain Name</span>
</title>