如何在使用ui.router時使用兩個標題信息？

我正在使用angularjs的ui.router，並有兩個模板視圖用於路由。因此，我只有一個<head></head>信息index.html如何在使用ui.router時使用兩個標題信息？

但是，我想適用於不同的系列標題元屬性和價值信息這兩個模板。例如，t <meta property="og:title" content="Something1">模板1和<meta property="og:title" content="Something2">模板2.

有沒有什麼辦法可以做到這一點，但仍然使用ui.router而不是將它們分開成兩個獨立的頁面？

來源

2016-06-21 Wayne Li

也許這可以幫助：https：//開頭的github .com/tinusn/ui-router-metatags –

使用$rootScope變量。

main.js：

$rootScope.metatags = { 
    content: 'Default content' 
};

Something1控制器：

$rootScope.metatags.content = 'Something1';

Something2控制器：

$rootScope.metatags.content = 'Something2';

的index.html：

<head> 
    // something 
    <meta property="og:title" content="{{metatags.content}}"> 
</head>

來源

2016-06-21 03:26:30 WorkWe

我試過它在facebook上的WebMaster'property =「og：title」'，但它無法解析{{metatags.content}}（https：//developers.facebook。 COM /文檔/共享/網站管理員）。另外，如果我使用$ rootScope，我的所有頁面的範圍似乎中斷，所有「{{}}」表達式不能被解析。 –

您應該使用https://prerender.io/進行搜索引擎優化 – WorkWe

與@WorkWe同樣的想法用$rootScope的，但不是把控制器上的meta標籤的信息，可以定義時將它作爲data object這是一個可選屬性的值一個新的狀態。有關更多信息，請參見docs。

$stateProvider 
    .state('home', { 
     url: '/', 
     templateUrl: 'home.html', 
     data: { 
      metatags: { title: 'Something1' } 
     } 
    }) 
    .state('about', { 
     url: '/about', 
     templateUrl: 'about.html', 
     data: { 
      metatags: { title: 'Something2' } 
     } 
    });

而在你的app.js，把它分配給了一些$ rootScope財產

angular 
    .module('app', ['ui.router']) 
    .run(function($rootScope, $state) { 
     $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) { 
      if(angular.isDefined(toState.data) && angular.isDefined(toState.data.metatags)) { 
       $rootScope.metatags = toState.data.metatags; 
      } else { 
       $rootScope.metatags = { title: 'Your default meta title content' }; 
      } 
     }); 
    });

最後，在你的HTML文件：

<head> 
    <meta name="og:title" content="{{ metatags.title }}"> 
</head>

來源

2016-06-21 04:03:33

如何在使用ui.router時使用兩個標題信息？

回答

相關問題