AngularJS动态页面标题首先加载大括号

Question

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

我正在尝试动态更改页面标题，当页面加载标题preloads {{ $root.pageName }} - Domain Name而不是- Domain Name然后在渲染时加载$rootScope.pageName 。

有没有办法隐藏{{ $root.pageName }}在页面加载时显示，直到应用程序获取变量？

Answer 1

你可以这样做：

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

请注意，在这种情况下，标题位于$rootScope 。

编辑：刚刚测试过它看起来像破折号一直显示，但这应该阻止它：

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

Answer 2

您可以使用ng-cloak指令隐藏原始（未编译）表单数据。我认为它会对您有所帮助。

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

ngCloak指令用于防止浏览器在加载应用程序时以原始（未编译）形式短暂显示Angular html模板。

请参阅此链接了解详情。

Answer 3

在标题中使用ng-show是没有意义的。 你可以这样做：

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

在你的run（）上，添加一个$ rootScope。$ on：

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

阅读完整资料来源： https ： //coderwall.com/p/vcfo4q

Answer 4

对的，这是可能的。

做这样的事情

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